1

I basically want to have an embedded Vimeo video take up the full width and height of a given page (or it's parent div). The embedded Vimeo is an iframe and I am using react-player plugin to embed the video .

I've seen these examples of responsive width vimeo videos: https://jsfiddle.net/e6w3rtj1/. Setting the padding bottom or top to the aspect ratio percentage. However, this only fixes the issue for the width. I basically want the object-fit: fill option on images and videos for this iframe. Is it possible? Has anyone come across a solution?

Dave Lee
  • 205
  • 5
  • 14

1 Answers1

1

I've found that there's a pure css solution to this problem involving media queries on aspect ratios.

HTML:

<div id="wrapper">
   <iframe/>
</div>

CSS

#wrapper {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   objectFit: fill, 
   transform: translate(-50%, -50%)

   @media (min-aspect-ratio: 16/9) {
      width: 177.78vh;
   }

   @media (max-aspect-ratio: 16/9) {
      height: 56.25vw;
   }
}
Dave Lee
  • 205
  • 5
  • 14