CSS Fluid Video Iframes And Embeds Quick Fix

By November 10, 2012CSS Tips

I’ve been kicking a lot of ass with Twitter Bootstrap lately, my new preference for 1140 fluid grid layouts (sorry 1140grid…), but I ran into a problem yesterday where I needed a YouTube video iFrame to resize fluidly along with everything else on the page. By default, the video stayed the same size no matter how I resized my browser, or what device I viewed it on, even with Bootstrap. Well, it turns out the solution was as simple as two new CSS styles.

.video-container { position: relative; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 56.25%;
padding-top: 30px; }

Then, simply wrap any videos that you want to be resized in the “video-container” class. It’s that easy.

Until next time!

Allen Gingrich

Author Allen Gingrich

Allen has worked on the web for over a dozen years. Like many young entrepreneurs, he began with a small workspace in his basement, where he eventually formed Ideas and Pixels. The rest, well, is history. Allen enjoys fine wines, weight training, and beautiful, semantic code.

More posts by Allen Gingrich
  • Matt Valvano

    This made me smile!

  • Johnny

    Can you please explain how this works and how you got those magical numbers? Thanks

  • Apatrid

    This is genius! You saved me so much time. Thanks!

  • bradrice

    I’m having one issue: height: 0 on .video-container collapses it completely up and hides the video. I have to give it an explicit height to get it to work. Am I doing something wrong?

    • mrgingrich

      I have updated this to work. Use the updated code above. Not sure what happened — sorry about the delay!

  • bradrice

    It still doesn’t work for me unless I specify an specific height on the video-container div.

  • Lalit Gupta

    I’am have a issue i have 2 ifame in different hight if i use above code then my page does’t display please suggest us