Spice Up Embedded YouTube Videos with Background CSS
If you are adding video to your website, using embedded YouTube videos is definitely something to consider. In addition to saving hugely on bandwidth, releasing your video into the wild on YouTube might gain you some exposure you may have not otherwise gotten. One drawback is that you don’t have very much control of how this video gets displayed. Basically you get the simple YouTube player:
You don’t have control over much, including quality and the “related videos” that YouTube will show once the movie is done playing. What you do have control over, is how and where this video gets embedded. To spice things up a bit, you could design a backdrop for the video, set it as a background-image of a div, and embed the video in that div. Check it:
Loading ...
1
I tried your tip for displaying a youtube video. I have the following issue where the video will display over the background image even though I want it to be hidden as if it were a real video being played. I tried z-indexing but that did not work. Do you have any ideas?
Link: http://www.myspace.com/styleplus1
You may contact me at daortezATgmail.com
Comment by David — March 12, 2008 @ 10:41 pm
2
@David: Looks pretty good to me… did you fix the problem or am I just not understanding your question?
Comment by Chris Coyier — March 13, 2008 @ 12:02 pm
3
Chris: I wanted to make it full screen but the best I can do is the current version with about a 10% gap that is empty. Thanks for the inspiration nonetheless.
Comment by David — March 13, 2008 @ 12:09 pm
4
Can you just change your background image to be narrower vertically to hide that gap?
Comment by Chris Coyier — March 13, 2008 @ 1:46 pm