Question

On a site I am building, I need to allow the video (iframe embed) to dynamically stretch to fit the screen. I will be grabbing the width of the parent div with jQuery, but I need to work out the math to automatically work out the height size.

YouTube has managed to do this in their custom sizer (click share, then embed and fill in the width to see the height automatically fill in).

Any ideas would be really useful, thanks!

---

Edit

Thanks to Eray for the help with this! If anyone is interested, here is the final working code (I think it works, anyway!):

$documentWidth = $('#wrap').width();
$theWidth = parseInt($documentWidth, 10);
$theHeight = (Math.floor($theWidth / 1.755) || 0) + 30;
$('#video iframe').height($theHeight);
$('#video iframe').width($documentWidth);

I am still not 100% sure how it works!

Answer 1

Get original width/height ratio . And then use this formula :

New Width = New Height * (Original Width/Original Height)

So you will keep same ratio on new width height combination.