显示带有 iframe 页面全宽的 YouTube 视频 [关闭]
Posted
技术标签:
【中文标题】显示带有 iframe 页面全宽的 YouTube 视频 [关闭]【英文标题】：Displaying a YouTube video with iframe full width of page [closed] 【发布时间】：2016-11-11 06:12:59 【问题描述】：我使用来自 YouTube 的 iframe 在我的网站中放置了一个视频，而 iframe 是全宽 (100%) 视频在框架内非常小（高度）。如何使它适合容器的宽度？
代码：
<iframe 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 堆栈。
【参考方案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 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%;
【讨论】：
以上是关于显示带有 iframe 页面全宽的 YouTube 视频 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章