使Youtube视频响应网页中心

Question

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

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

这是我的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;
}

我为此创造了一个小提琴.

Answer 1

没有必要对此进行过度设计,您只需要:

FULLSCREEN的完整代码

点击演示

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.

• 网站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;
}