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!
