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!
Matt Valvano 
Johnny 
Apatrid 
bradrice 
mrgingrich 
Lalit Gupta
This made me smile!
Can you please explain how this works and how you got those magical numbers? Thanks
This is genius! You saved me so much time. Thanks!
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?
I have updated this to work. Use the updated code above. Not sure what happened — sorry about the delay!
Thanks Mr. Gingrich!!
It still doesn’t work for me unless I specify an specific height on the video-container div.
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