具有固定高度的响应式 iframe

Question

我正在尝试制作一个具有响应宽度（填充 div）但固定高度（溢出被 div 隐藏）的 iframe。但是当我缩放页面时，视频也会缩小。我希望 iframe 保持 100% 高度。

有谁知道我在这里做错了什么？我尝试过不设置 iframe 高度，og 将其设置为自动，但它不起作用。

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

非常感谢任何帮助！

Answer 1

使用视频 HTML 标签代替 iframe 将解决问题。

.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>

让我知道它是否适合您。 CODEPEN

Answer 2

我尝试了多种方法来为这个嵌入式播放器使用 CSS，但看起来它必须是 JS，带有 resize 侦听器和 absolute 定位才能完成工作

Codepen here 加载视频：https://codepen.io/savageGoat/pen/oNoBbMz

完整代码：

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

因此您需要编辑一些 CSS 以使其工作

实时结果：Codepen.io

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

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

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

解释：

将您的容器设置为响应式，但将溢出设置为隐藏，因为当带有 iframe 的子元素比容器宽时您不想要滚动条。

将您的视频设置为正确的分辨率，固定高度为 700 像素，我通过反复试验确定它的宽度为 1240 像素（您可以计算出来）。

现在要在屏幕变小时将视频保持在中间，我们需要记住不是视频在缩小，而是父容器在缩小。所以我们只是调整显示视频的视图。不适合该视图的部分需要平均划分并隐藏在视图的左侧和右侧，以便视频的中心始终可见。为此，我们需要计算视频包装器的负左边距。那就是视口减去视频的宽度。那些是不在视图中的像素然后它需要除以 2（左和右）。

希望当您再看一下 CSS 时，解释是有意义的。

具有固定高度的响应式 iframe

Responsive iframe with fixed height

html

css

video

iframe