0

There are tons of solutions out there to responsively embed video, but I've not been able to find one that sets a video embed size by viewport height.

I have three elements on my page: a header, a Youtube embed, and a footer. The header and footer are set to a static "height: 15vh;" and I need my Youtube embed to be 70vh, and for the width to maintain the 16:9 aspect ratio without overflowing.

To re-iterate, I am not looking for any solution that sets embed size by its width (e.g. the padding-bottom: 56.25% method).

Any thoughts?

Thanks!

[Edit: this is not a duplicate question. The solution offered in the other question refers to 100% width whereas I am looking for the width to resize in ratio to the viewport vertical height specified (70vh).]

bjornfloki
  • 296
  • 2
  • 4
  • 15
  • An example would be helpful to see what you have tried for some context! Also what is wrong with using the `padding-bottom:55.25%;` hack? This looks like a duplicate or similar question relating to making an element aspect ratio using viewport height `vh` .. Please see: http://stackoverflow.com/questions/34022265/set-video-embed-size-to-a-particular-viewport-height-while-maintaining-aspect-ra – Jonathan Marzullo Dec 01 '15 at 15:02
  • Possible duplicate of [Maintain aspect ratio of div but fill screen width and height in CSS?](http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css) – Jonathan Marzullo Dec 01 '15 at 15:08
  • Thanks for the suggestion Jonathan. However, this solution does not seem to maintain the video aspect ratio (16:9). It defaults to full width, where I need the iframe to be the correct width in relation to its height. I've added a demo page here where I've tried the solution above (with a div wrapper set to height: 70vh): http://www.dominorecordco.com/sandbox/testing/videotest.html – bjornfloki Dec 02 '15 at 12:13

0 Answers0