• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Adding nice border to videos (easy)

mrGTB

Well-known member
#1
If you don't like the rather bland look of video displayed in treads, there is a very easy way to put a border around them that cross-browser compatible and doesn't require you set-up height and width.

For this example I use the YouTube BBCode here.

1: go to your you EXTRA.css template stylesheet and add this new CSS entry in it

Code:
.video_border
{
    background-color: @primaryLightest;
    border: 1px solid @primaryLighterStill;
    padding: 4px;
}
2: Go to YouTube in (BB Code Media Sites)

Now add a class to it so the code looks like this below (CSS Class added extra in red).

<iframe width="500" height="300" class="video_border" src="http://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe>
The result will look like this below: And you can follow the same step adding that class to all other videos like Vimeo to give them a border, but still only using that one CSS Class added in EXTRA.css

youtube.png
 

mrGTB

Well-known member
#3
This is not a DIV wrapped around the video itself method, so not really. I don't think so without messing around with it. I would image you'll have to go the other route of wrapping a DIV or SPAN class around it, then doing it that way. I avoid using that method because it has problems in some browsers displaying the border correctly.

Your better including the class with the video, the same way you'd include a class with an IMG tag to create borders.

<img src="" class="" alt="" />