Spice Up Embedded YouTube Videos with Background CSS

Avatar of Chris Coyier
Chris Coyier on

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:

embeddedyoutube1.png

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:

embeddedyoutube2.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]