children iframe as background video and keep ratio

Question

I want to set an iframe.children video of any website as a div.parent background. the children iframe will always be bigger than parent div and parent div overflow will be hidden. Iframe will also keep aspect ratio. I found some jquery plugins but I want to understand how it works. Please help me.

Answer 1

What you're talking about is basically intrinsic ratio†. A ratio must maintain width and height at a constant relative value so when width increases or decreases, the height of a video does likewise of course. We can do this by creating a container (usually a <div> ) that has the desired dimensions (usually 16:9 for widescreen or 4:3) and place the iframe and/or video within that container.

The technique commonly employed for a responsive video embedded within an iframe is as follows:

1. box (aka container, or wrapper)

   This div will be triggered by any re-sizing. For any element in the DOM a re-size involves calculation of height and width at the least.

   Further down this post I made a simple demo.

   Notice the width: 100% and the padding-bottom: 56.25% .

   If width increases from 100px to 200px , then height increases from 56.25px to 112.5px.

   The ratio of 16:9 is constantly maintained by setting the padding-bottom: 56.25% . If you have an older video with the aspect ratio‡ of 4:3, you'd use padding-bottom: 75% If you have a non-standard aspect ratio like 8:21, you can find the padding-bottom percentage by dividing the denominator by the numerator like so: 8/21 = .38 = 38% (The quotient was rounded down).

   So the funky padding-bottom percentage acts like an inflatable cushion that inflates or deflates according to when width changes, but only enough to re-size the height within the parameters of the ratio.

   The extra padding-top is to counter the huge padding-bottom otherwise the video will be pushed too far and cause overlapping of elements. The height:0 is probably not necessary as this weird value was to deal with IE6. I just left it in there just for that edge case (you know just in case you time traveled back to 2001 or you live in a cave in the middle of the Gobe Desert.)

2. iframe

   The rule sets for the iframe are a lot easier to explain. Simply put, the iframe (and the video) height and width are stretched to fit perfectly within .box. So basically it's .box that does all the work and the iframe goes along and conforms to the dimensions of .box.

 .box { position: relative; padding-bottom: 56.25%; /* [56.25%= 16:9 ] [ 75% = 4:3 ] [ 41.66% = 24:10 ] */ padding-top: 25px; height: 0; } .box iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } 

 <div class="box"> <iframe id="ifrm" src="https://arcx.s3.amazonaws.com/av/test.html"></iframe> </div> 

By now you should be thoroughly confused by my ramblings, so I strongly advise you to read these articles:

• Creating Intrinsic Ratios for Video
• Fluid Width Video
• What is Aspect Ratio?‡
• A Box with an Intrinsic Ratio†