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%'.
<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>
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.
Bottom line: It's just easier to wrap in a div.
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.