CODEWITHSUNDEEP
htmlcssvimeovimeo-player
Stuggi
Stuggi

Reputation: 215

Vimeo Embed Not Obeying max-height

I have a mysterious problem trying to get a responsive Vimeo embed to work with my overall sight design. What I'm trying to achieve is for the Vimeo embed to render the same as images below it;

HTML:

<div class="vimeo"><iframe src="https://player.vimeo.com/video/180293809?h=9f21a250ca" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

CSS:

.vimeo {
  display: block;
  padding: 1vw;
  position:relative;
  max-width: 95vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

The above renders the div with a height of 0 px. However, when I do the same thing with for example an image, it works just fine. I've also tried to apply the same CSS to the inner iframe, but then it instead just makes the iframe larger while rendering the video player the size of a postage stamp.

Upvotes: 0

Views: 675

Answers (0)

Related Questions