如何拉伸 YouTube 嵌入视频？答案

【问题标题】：How to strech YouTube embed video?如何拉伸 YouTube 嵌入视频？
【发布时间】：2020-06-16 09:30:12
【问题描述】：

我正在尝试将 youtube 视频设置为 bredcrumb 背景，但我无法将视频宽度设置为全屏尺寸。正如您将看到的，视频下方的图像显示在 iframe 的中心，并且没有拉伸到全屏。

/视频左右两边的黑条/

这是我的代码：

#myVideo {
 position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
   width: 100vw; /*now it is 100% of viewport (window) width.*/
   display: inline-block;
  min-height: 100%;
  z-index: -99;

}

<div id="myVideo" >
	<iframe width="100%" height="300px;" src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
	</div>

【问题讨论】：

标签： html css video iframe embed

【解决方案1】：

这是因为 YouTube 保持了比例。如果你想让它填满页面的宽度，你也应该增加高度。

【讨论】：

好的，但是我想把它作为面包屑背景，所以不能增加高度。是否可以裁剪它，或者其他什么..？
如果您的页面没有滚动，那么您可以增加高度并在css文件中写入html, body { overflow: hidden; }

【解决方案2】：

首先，将您的 div 包裹在另一个具有固定位置的 div 元素中。
然后，为 myVideo 元素和 iframe 设置 CSS，使用绝对位置和全高/全宽。

最后，要使其正常工作，您需要一些基于纵横比的媒体查询（在 16/9 之后和之前）以正确定位它。您也可以测试不同的位置属性。

.video-wrapper {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#myVideo, .video-wrapper iframe {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myVideo { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #myVideo { width: 300%; left: -100%; }
}

<div class="video-wrapper">
  <div id="myVideo" >
    <iframe src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
  </div>
</div>

【讨论】：