CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
juanpazos
juanpazos

Reputation: 157

How to make iframe vertically responsive keeping aspect ratio

I have a page with an youtube iframe. Here's what I need: - The video height will be a percentage of the browser window height. - If the user resizes the browser window moving the cursor up and down (making the window taller or shorter), the iframe height will keep the percentage, BUT ALSO THE VIDEO WILL PRESERVE IT'S ASPECT RATIO (the width will change along with the height)

This needs to be totally responsive, not just on reload.

The behavior is something like (in fantasy code):

iframe {
    height: 20%;         /* 20% of the browser window height  */
    width: height*1.64;  /* get the value in pixels and multiply by 1.64 */
}

The same way the photo behaves in this page: http://hotdot.pro/en/#lophoto
(In fact I'm using the parallax javascript engine created by hotdot)

I've searched a lot for it on the web and found nothing.

Anybody knows how to accomplish this? Thanks

Upvotes: 2

Views: 1353

Answers (1)

juanpazos
juanpazos

Reputation: 157

Thanks for your help guys, but I ended up using javascript:

window.addEventListener('resize', function(event){
  var cw = $('.youtube').height();
  $('.youtube').css({
      'width': cw*1.64 + 'px',
      'margin-left': '-' + cw*0.82 + 'px'
  });
});

And I added the following inline css to the iframe element:

position: absolute;
top: 29%;
height: 37%;

Upvotes: 2

Related Questions