CSS trick #21: How to put a border on a YouTube video That’s right! It is possible!!
This isn’t a magical be all, end all solution. But it works.
The problem is when you put a border on a div around your video, that div is going to be the full width of the parent div. So you’ll have space to the right of your video inside of your border.
So I finally figured after trying to change the CSS display mode of everything in my YouTube video and every other stupid possibility my mind fired out ... if I just gave my parent div that contained the border a fixed width, I could get on with my life.
But this isn’t a perfect solution! my perfectionist ego shouted out. Here’s the kicker, ego: you’re only ever going to post at max 3 video widths. And you don’t make videos that often! So how about you step off that perfectionist podium and do a little like this?:
HTML:
<div class="yt-480x385">[youtube object code blah blah blah]</div>
CSS:
div.yt-480x385 { border: 3px solid #aaa; width: 480px; }
It works! Look:
And now you can return to your previously scheduled cocktail.
Perfection is pointless. Get the job done to the standard it needs and no more. Move on. It’s okay. You can do it. ... Noooooo, of course your machine won’t blow up. Neither will your monitor. I promise. ... Go have some fun! :)
Comments
I appreciate your feedback. Comments are moderated. Email is required but won't be printed. Include your website if you have one.
This almost works...I use pretty much the same method. Viewed in IE it looks fine. In Firefox there is a few extra pixels on the bottom of the video. I am seeing the few extra pixels on yours as well. Set the css height attribute to the video’s height and you will be good to go.
by Kevin on February 10, 2010 at 12:45 pm