How to create proportional, scaled, responsive iframes and youtube videos


Ever have a video that just won't stay within it's column? Regardless of whether your website morphs to fit the size of the screen it's being viewed on, or has a static width, you may still find this to be an issue. Youtube's embed code is written to work at a few standard sizes, but it's not fluid. Until HTML6 comes out with a property called percentageWidth, there's no built-in answer, but we've got a so-called "hack". Our favorite solution is completely CSS, and works quite well on all browsers we have tested! It's quite simple too, just wrap your video in a div with a width of 100%, height 0px, and set the padding-bottom to the percent of the width you'd like your video's height to be. Finally, remove the preset height='' width='' from the iframe, and add style='width: 100%; height: 100%'.

HTML:

<div style='position: relative; width: 100%; height: 0px; padding-bottom: 60%;'>
<iframe style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%'></iframe>
</div>


Example:
560x315 video
Divide height by width: 315/560 = .5625
Multiply times 100: .5625 * 100
Your padding-bottom = 56.25%

Resize this window and watch as the video adjusts to maintain it's ratio.



Alternatively, you could always do this with jQuery or Javascript by waiting for the page to load, calculating the ratio based on the embed code's preset height and width, grabbing the width of the iframe's container, calculating the height based on that, then setting the iframe to width: 100% and the height you solved for, but that would mean your visitors would have to have javascript enabled, you'd have to save that ratio and recalculate if the screensize changes, and the code would take much longer to write.

Bottom line: It's just easier to wrap in a div.




Shane Stebner

Author: Shane Stebner

Shane is a successful web-developer specializing in responsive design, and the open-source LAMP stack. Over the years, he's gained in-depth experience with Stripe, Twilio, PhantomJs, Authorize.net, PayPal, Facebook, Twitter, and many other plugins/APIs.


comments powered by Disqus