Responsive iframe with fixed height

Question

I'm trying to make an iframe with responsive width (filling a div) but fixed height (overflow hidden by div). But when I scale the page the video also scales down. I want the iframe to keep 100% height.

Does anyone know what I'm doing wrong here? I've tried not setting the iframes height, og setting it to auto, but it doesn't work.

HTML:

<div class="container">
<div class="video-wrapper">
<iframe class="video" src="https://player.vimeo.com/video/82481183?background=1" frameborder="0" allow="autoplay" ></iframe>
</div>
</div>

CSS:

.container {
background-color: green;
max-width: 1200px;
min-width: 700px;
height: 700px;
}

.video-wrapper {
background-color: red;
width: 100%;
height: 100%;
overflow: hidden;
}

.video {
height: 100%;
width: 100%;
}

https://codepen.io/marteteigen/pen/NWwdGXd

Any help is much appreciated!

Answer 1

Instead of iframe using video HTML tag will solve work.

 .container { background-color: green; max-width: 1200px; min-width: 700px; height: 700px; }.video-wrapper { background-color: red; width: 100%; height: 100%; overflow: hidden; }.video { height: 100%; width: 100%; }

 <div class="container"> <div class="video-wrapper"> <:-- <iframe class="video" src="https.//player.vimeo?com/video/82481183:background=1" frameborder="0" allow="autoplay" ></iframe> --> <video class="video" controls> <source src="https.//player.vimeo?com/video/82481183.background=1" type="video/mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div>

Let me know if it works for you. CODEPEN

Answer 2

I tried multiple ways to use CSS for this embeded player but it looks like it has to be JS with a resize listener and absolute positionning that does the job

Codepen here to load the video: https://codepen.io/savageGoat/pen/oNoBbMz

Full code:

 const vid = document.querySelector('.video'); const container = document.querySelector('.video-wrapper'); const vidWidth = vid.offsetWidth; const vidHeight = vid.offsetHeight; const applyWidthHeight = () => { const vidRatio = vidHeight / vidWidth; const parentHeight = container.offsetHeight; vid.height = parseInt(parentHeight) + 'px'; vid.width = parseInt(parentHeight*vidRatio) + 'px'; vid.style.height = parseInt(parentHeight) + 'px'; vid.style.width = parseInt(parentHeight*vidRatio) + 'px'; } window.addEventListener('resize', applyWidthHeight); document.addEventListener('DOMContentLoaded', applyWidthHeight);

 .container { background-color: green; max-width: 1200px; min-width: 700px; height: 700px; }.video-wrapper { background-color: red; width: 100%; height: 100%; overflow: hidden; position: relative; }.video { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

 <div class="container"> <div class="video-wrapper"> <iframe class="video" src="https://player.vimeo.com/video/82481183?background=1" frameborder="0" allow="autoplay" ></iframe> </div> </div>

Answer 3

So you need to edit some of the CSS to make it work

Live result on: Codepen.io

.container {
  max-width: 1240px;
  overflow: hidden;
}

.video-wrapper {
  margin-left: calc((100% - 1240px) / 2);
}

.video {
  width: 1240px;
  height: 700px;
}

Explanation:

Set up your container to be responsive, but set overflow to hidden as you don't want a scrollbar when the child element with the iframe gets wider then the container.

Set your video to the correct resolution for a fixed height of 700px, I determend it was 1240px wide by trial and error (you could calculate it).

Now to keep the video in the middle when the screen gets smaller we need to keep in mind that it's not the video that's shrinking but the parent container. So we're just adjusting the view that shows the video. The parts that don't fit in that view need to be equally divided and hidden on the left and right side of the view so that the center of the video is always visible. For that we need to calculate the negative left margin for the video wrapper. Thats the viewport minus the width of the video. Those are the pixels that are not in the view then it needs to be equally divided by 2 (left and right).

Hopefully the explanation makes sense when you take another look at the CSS.