使Youtube视频响应网页中心

Question

我正在开发一个响应式Youtube视频嵌入。我能够根据互联网提供的代码使其响应。但是，当视频宽度较小时，高度不是100％。我希望高度始终为100％。因此，当宽度较小时，视频不会粘到顶部，底部空白。我知道当宽度很小时它会在顶部和底部有黑条，但我很好。

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

这是我的HTML：

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

CSS：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    right: 0;
    left: 0;
}

#wrap-player {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我创建了一个Fiddle for that。

Answer 1

没有必要对此进行过度设计，您只需要：

FULLSCREEN的完整代码

CLICK FOR DEMO

<强> 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>

---

说明

• margin / padding：0

通常被称为全局重置。此过程只是设置边距和填充的默认值，因此消除了经常变化的任何浏览器特定默认值。

• html：100％

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

• 身体：100％

正文遵循与html相同的渲染原则。通过设置高度100％，我们要求身体填充其容器的高度，在这种情况下是html。

• site div：100％

通常一个很好的做法是拥有一个包装整个网站的主div，授予对布局的完全控制权，而不会过度操纵body标签。设置高度100％将使div填充其容器的高度，在本例中为body标记。

从这里开始，有一个级联效果，允许任何后续的块级内容填充其容器的高度。除非我们另外设置，否则这将始终为100％。

高度为100％的任何块级元素放置在内容div中，如图像中所示，只会变为其容器的高度，因此不会填满屏幕。

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

• 溢出：隐藏

默认情况下，即使元素没有滚动，也会经常显示滚动条。设置溢出隐藏只会删除溢出的内容，从而删除滚动条。因为在这种情况下内容永远不会溢出，所以它们不是必需的。

• iframe：100％

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

我建议将iframe本身的高度设置为100％，而不是css，原因有两个：

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

2. 从youtube复制嵌入代码时，始终会设置默认的高度和宽度。 iframe应该直接应用高度和宽度属性。我个人认为设置高度/宽度然后用css覆盖是不错的做法。

（注意：这与我自己认为所有样式都应该在css内完成相反）

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

Answer 2

我稍微修改了你的设置的CSS。 视频和每个父母都有100％的高度，所以它总是100％的高度。 http://jsfiddle.net/me2loveit2/R6e7j/5/

html, body, iframe, #wrap-player, .video-container, #player{
    width:100%;
    height:100%;
    margin:0px;
    overflow:hidden;
}

Answer 3

你在这里查看演示http://jsfiddle.net/zLc2s/1/

你需要计算文件高度并根据新的高度调整播放器的高度。

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

Answer 4

使用vh单位很容易做到：

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

以下是更新后的fiddle。

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