javascript - YouTube 视频 : fit content on non 16:9 father (as background-size: cover)

Question

有没有办法在 YouTube iframe 上或使用 API 模拟 object-fit: cover 或 background-size: cover？

请注意，视频的容器不是 16:9 的比例。最好有一个适用于所有比例的解决方案或公式。

Answer 1

假设源视频至少是水平的，这应该可行。

1. 检查容器的高度
2. 计算视频的宽高比
3. 将 iframe 的高度设置为等于容器的高度，并通过将(反转的)纵横比乘以容器宽度来设置宽度。
4. 将视频绝对定位在容器内以确保其居中。

HTML:

<div class="container">
  <iframe src="https://www.youtube.com/embed/ilxhlnDo7_M" frameborder="0"></iframe>
</div>

CSS:

.container {
  position: relative;
  overflow: hidden;
  height: 400px; /* whatever you want */
  width: 100%; /* whatever you want */
}

.container iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

JS:

const container = document.querySelector('.container')
const video = container.querySelector('iframe')
const videoAspectRatio = video.clientWidth / video.clientHeight

video.style.height = `${container.clientHeight}px`
video.style.width = `${container.clientWidth * videoAspectRatio}px`

似乎 SO 嵌入不支持 YouTube 嵌入所以我把这个例子分解成 fiddle :https://jsfiddle.net/e5bxpuzf/4/

一个不幸的缺点是当视频调整大小时你会得到“无样式内容的闪光”，我建议在加载视频后淡入以避免 FOUC。

这里有一个带有一些不同容器的 fiddle 作为例子。视频将是容器的 100% 高度并水平居中:https://jsfiddle.net/e5bxpuzf/2/

注意:我选择不编写条件来检查视频高度是否大于宽度，因为这似乎是一种边缘情况。如果您需要，我可以更新 fiddle 以适应。