Question

我将YouTube视频嵌入HTML页面。我希望视频在浏览器窗口中显示尽可能大。这是我用于嵌入式iframe的CSS：

iframe {
  position: absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  overflow: hidden;
}

在播放视频时，它恰好适合窗口，保持其纵横比，并按照我的预期显示上下左右或左右空白。

但是，初始海报图像会完全填满窗口。我希望它调整其高度和宽度，以使其具有与视频相同的尺寸和位置。

我认为我可以访问视频iframe中的元素，以发现视频的尺寸。但是，当我使用document.querySelector("iframe").contentWindow.document时，会收到一条错误警告，指出访问跨域框架已被阻止。

如何检测视频的长宽比，以便可以正确设置iframe的尺寸？

Answer 1

我找到了解决方案。但是，这意味着要为视频的尺寸提供硬编码的值。

在YouTube上，我右键单击以显示“书呆子状态”，并记下Current / Optimal Res（例如：1280x720 @ 30）。在HTML中，我以--width和--height CSS变量的形式提供了相关信息：

HTML：

<iframe style="
          --width:1280;
          --height:720;
        "
        src="https://www.youtube.com/embed/fUyU3lKzoio"
        frameborder="0"
        allowfullscreen>
</iframe>

在CSS中，我将width和height设置为窗口的完整大小（使用vw和vh单位，它们返回窗口上的完整可用大小智能手机和平板电脑）。我还设置了max-height和max-width的上限，以确保尊重视频的长宽比：

CSS：

iframe {
  width:  100vw;
  height: 100vh;
  max-height: calc(100vw / var(--width) * var(--height));
  max-width:  calc(100vh * var(--width) / var(--height));
}

嵌入式YouTube视频的海报框大于视频

1 个答案: