如何在 iframe 中更改 Youtube 播放器的宽度和高度

Question

我试图将 Youtube iframe 内的视频播放器的高度和宽度设置为 100% 和 100%（完整的 iframe 宽度），但我不能。我的 Iframe 无论如何都是 100vw，但它里面的视频播放器是自动的（我猜是出于质量原因），但我希望它是 100vw，但我无法更改它，

我试过像这样使用 css 选择器：

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

但它不起作用，我猜它看不到 iframe 里面的内容？帮助将不胜感激

Answer 1

要更改 iframe 中视频的宽度，您可以使用以下 CSS：

.my-video {
  width: your desired width;
}

<iframe class="my-video" src="video.mp4"></iframe>

如果视频标签位于嵌套在另一个元素中的 iframe 内，您可以通过使用 CSS 选择嵌套的 iframe 然后选择其中的视频标签来专门定位视频标签。

例如，如果您的 HTML 结构如下所示：

.container iframe video {
  width: your desired width;
}

<div class="container">
  <iframe>
       <video>...</video>
   </iframe>
</div>

或者，您可以使用类或 ID 来选择嵌套的 iframe 和视频。

.my-iframe .my-video {
  width: your desired width;
}

<div class="container">
  <iframe class="my-iframe">
       <video class="my-video">...</video>
   </iframe>
</div>

笔记也可以使用 JavaScript 来更改视频的宽度。

var iframe = document.getElementsByClassName("my-iframe")[0];
var video = iframe.getElementsByTagName("video")[0];
video.style.width = "your desired width";