Javascript YouTube视频：在非16:9的视频中播放内容（背景尺寸：封面）

有没有办法在YouTube

iframe

上或使用API模拟

对象匹配：cover

或

背景大小：cover

---

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

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

检查容器的高度

计算视频的纵横比

将iframe的高度设置为等于容器的高度，并通过将（反向）纵横比乘以容器宽度来设置宽度

将视频绝对放置在容器内，以确保其居中

HTML:

JS:

似乎嵌入不支持YouTube嵌入，所以我将示例分解为一个小部分：

一个不幸的缺点是，在视频调整大小时会出现“未格式化内容的闪烁”，我建议在加载后淡入视频以避免FOUC

下面是一些不同容器的例子。视频将为容器的100%高度，水平居中：

---

注意：我选择不写条件来检查视频的高度是否大于宽度，因为这看起来像是一个边缘案例。如果您需要，我可以更新小提琴以适应。

您提到的两个CSS属性都是为了用元素外部剩余的“隐藏”宽度/高度“覆盖”容器的宽度和高度。如果使用YouTube iframe执行此操作，控件也将位于可视区域之外。这是您想要的，还是您想要iframe填充容器？隐藏控件没有问题，因为视频是作为背景的。用户实际上不应该与它交互。是的，我想要

封面

的行为。谢谢你的澄清，希望我的答案能帮你解决。我不得不稍微考虑一下纵横比，乘以1.4。这是我唯一的改变。很好，谢谢你！没问题，很高兴我能帮忙。

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

.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%);
}

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`