CSS Tips

CSS Fluid Video Iframes And Embeds Quick Fix

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

Ready to quote your new website? We are.

Send us your RFP or request a call or meeting with us so we can learn more about each other.