Html 使Youtube视频响应网页中心

我正在制作一个响应迅速的Youtube视频嵌入。我能够使其响应的基础上从互联网上可用的代码。然而，当视频宽度很小时，高度不是100%。我希望高度始终为100%。这样，当宽度很小时，视频就不会粘在顶部，而留下底部空白。我知道当宽度很小时，它的顶部和底部都会有黑色的条带，但我同意

我发现一个网站有它。可以在上观察到，当宽度减小时，视频移到中心，而不是粘在顶部

这是我的HTML：

<div id='wrap-player'>
    <div class="video-container">
        <div id="player"></div>
    </div> 
</div>

我已经创建了一个。您可以在这里查看演示

您需要计算文档高度，并根据新高度调整播放机的高度

$(document).ready(function () {
    $('.video-container').css('height', $(window).height());
});

---

我稍微修改了一下你设置的css。 视频和每个家长都有100%的高度，所以它总是100%的高度。

---

无需过度设计，您只需：

全屏显示的完整代码

CSS

html,body{ margin:0; padding:0; height:100%; width:100%; }
#wrap-player{
    height:100%;
    width:100%;
    overflow:hidden;
}

HTML

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>

---

解释

• 边距/填充：0

通常称为全局重置。这个过程只是为边距和填充设置默认值，因此消除了任何浏览器特定的默认值，这些默认值通常会有所不同

• html:100%

默认情况下，页面的html仅与其包含的内容一样高。 将html的高度设置为100%将使该高度成为浏览器可见区域的高度

• 正文：100%

主体遵循与html相同的呈现主体。通过将高度设置为100%，我们要求主体填充其容器的高度，在本例中为html

• 地盘分区：100%

通常，一个主div包装整个网站是一个很好的实践，它可以在不过度操纵body标签的情况下完全控制布局。将height设置为100%将使div填充其容器的高度，在本例中为body标记

从这里开始，将出现一种级联效应，允许任何后续块级内容填充其容器的高度。这将始终是100%，除非我们设置其他明智的

任何高度为100%的块级元素放置在内容div内（如图像中）将仅成为其容器的高度，因此不会填充屏幕

（注意：使元素位置固定/绝对会将其从文档流中删除。在大多数情况下，其容器及其高度将由遇到的下一个相对定位的父元素确定。）

• 溢出：隐藏

默认情况下，即使某个元素没有滚动条，滚动条也会经常显示。设置overflow hidden只会删除溢出的内容，从而删除滚动条。由于此实例中的内容永远不会溢出，因此它们不是必需的

• iframe:100%

Youtube使用iframe嵌入其视频内容，因此将高度设置为100%将使iframe的高度以及随后的视频在其容器的高度内

我建议将iframe本身的高度设置为100%，如上所述，而不是在css中，原因有二：

如果您的网站中有多个iframe，则会为所有iframe设置高度。如果这是需要的，那么这不是问题

从youtube复制嵌入代码时，始终设置默认高度和宽度。iFrame应具有直接应用于它们的高度和宽度属性。我个人不认为设置一个高度/宽度，然后用css覆盖是好的做法

（注意：这与我自己的观点相反，即所有样式都应该在css中完成）

---

如果iframe之上的所有父容器一直设置为100%，直到html元素；视频将是浏览器可见窗口的高度。

使用

vh

单位，操作非常简单：

iframe {
    width: 100%;
    height: 100vh;
    display: block;
}

这里是最新的

---

（有时最简单的解决方案就是最好的）

谢谢。但这使得视频的高度甚至超过了窗户本身的高度。有什么线索吗？您可以使用window.innerWidth或$（document.height（）；您已经为此更新了小提琴，而不是$（window）.height（）。但是，它的两侧仍然有一个滚动条。我不确定我可能遗漏了什么。我无法打开小提琴。不知道为什么。我也看不到你的了…但我只是拿了你的，用上面的css替换了css，在javascript中，我将宽度和高度设置为100%可能的重复，我已经添加了我问题中的内容。我已经在使用同样的技巧了，它正在缩小到一定的程度。

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>

iframe {
    width: 100%;
    height: 100vh;
    display: block;
}