Adding nice border to videos (easy)

[mrGTB]

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

.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

 

[Digital Doctor]

Can I add a footer with some text ?

 

[mrGTB]

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="" />