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!

About The Author: 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.

  • 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!

      • http://ideasandpixels.com/ Matt Valvano

        Thanks Mr. Gingrich!!

  • 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