Grow your CSS skills. Land your dream job.

Spice Up Embedded YouTube Videos with Background CSS

Published by Chris Coyier

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]

Comments

  1. Permalink to comment#

    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

  2. @David: Looks pretty good to me… did you fix the problem or am I just not understanding your question?

  3. Permalink to comment#

    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.

  4. Can you just change your background image to be narrower vertically to hide that gap?

  5. Collins

    How do i exactly do that in a WordPress site so that my video appears embedded in this image http://marketwithcollins.com/wp-cont…tbox-image.png.

    Your help will be appreciated

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".