显示带有 iframe 页面全宽的 YouTube 视频 [关闭]答案

【问题标题】：Displaying a YouTube video with iframe full width of page [closed]显示带有 iframe 页面全宽的 YouTube 视频 [关闭]
【发布时间】：2016-11-11 06:12:59
【问题描述】：

我使用来自 YouTube 的 iframe 在我的网站中放置了一个视频，而 iframe 是全宽 (100%) 视频在框架内非常小（高度）。如何使它适合容器的宽度？

代码：

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

看截图

【问题讨论】：

Shrink a YouTube video to responsive width的可能重复
你是想制作背景视频还是整页视频？
请显示您正在使用的代码，以便我们为您提供可能的解决方案
另一个快速解决方法是使用 transform: scale(2); 并给 iframe 一个较低的 z-index
如果容器或其父级在其定义中具有溢出：隐藏或自动，则尝试与具有高 z-index 的容器重叠的视频仍将被剪辑。跟踪定义并在本地使用 overflow: visible 覆盖它，或者使用转换技巧启动一个新的 z 堆栈。

标签： html css iframe youtube

【解决方案1】：

要使 You Tube 视频全宽并保持高度（并保持响应），您可以使用以下设置。

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

由于某种原因，视频没有显示在 Android 上的 Google Chrome 上。知道可能是什么问题吗？
添加来源：css-tricks.com/NetMag/FluidWidthVideo/…
为什么 padding-top: 25px; ?
尽可能在 youtube URL 中使用 https。在我没有 https 的情况下，视频不会在 Chrome 中显示。
在您的网站上嵌入来自 www.youtube-nocookie.com 的内容时使用。

【解决方案2】：

问题是 iframe 和视频无法像图像一样缩放，如果您将高度保留为默认值，它会根据纵横比获得按比例正确的高度。

解决此问题的方法是计算出视频的原生宽度/高度，然后做一些数学运算来确定在 100% 屏幕宽度下的高度应该是多少。假设它是 1920x1080，您可以使用视口宽度 (vw) 执行类似的操作。如果您不想让它完全填满屏幕，您可以将 100vw 降低到更合适的值。

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}

【讨论】：

谢谢！使用height: calc(100vw/1.77777778); 去除多余的黑线。

【解决方案3】：

使用全屏属性：

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

如果它不起作用，则还包括以下 css 代码：

#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;

【讨论】：