使 Youtube 视频响应网页中心
Posted
技术标签:
【中文标题】使 Youtube 视频响应网页中心【英文标题】:Making Youtube video responsive towards centre of web page 【发布时间】:2014-09-22 07:27:56 【问题描述】:我正在开发一个响应式 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。
【问题讨论】:
Shrink a Youtube video to responsive width的可能重复 我已经添加了我的问题中的内容。我已经在使用相同的技巧,它正在缩小到一定程度。 【参考方案1】:没有必要过度设计这个,你只需要:
全屏的完整代码
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 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 标签。将高度设置为 100% 将使 div 填充其容器的高度,在本例中为 body 标签。
从这里开始有一个级联效果,允许任何后续块级内容填充其容器的高度。除非我们以其他方式设置,否则这将始终为 100%。
任何高度为 100% 的块级元素放置在图像中的内容 div 内,只会成为其容器的高度,因此不会填满屏幕。
(注意:使元素位置固定/绝对会从文档流中删除它。在大多数情况下,它的容器以及它的高度将由遇到的下一个相对定位的父元素确定。)
溢出:隐藏默认情况下,即使元素没有滚动,滚动条仍会经常显示。将溢出设置为隐藏只会删除溢出的内容,从而删除滚动条。由于在这种情况下内容永远不会溢出,因此它们不是必需的。
iframe:100%Youtube 使用 iframe 嵌入其视频内容,因此将高度设置为 100% 将使 iframe 的高度以及随后的视频在其容器的高度内。
我建议在 iframe 本身上将高度设置为 100%,而不是在 css 中,原因有两个:
如果您的网站中有多个 iframe,则会为它们全部设置高度。如果这是需要的,那么这不是问题。
从 youtube 复制嵌入代码时,始终设置默认高度和宽度。 iframe 应该有一个直接应用到它们的高度和宽度属性。我个人认为设置高度/宽度然后用 css 覆盖不是一个好习惯。
(注意:这与我自己认为所有样式都应该在 css 中完成的观点相反)
如果 iframe 上方的所有父容器都设置为 100%,一直到 html 元素;视频将是浏览器可见窗口的高度。
【讨论】:
【参考方案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;
【讨论】:
我无法打开小提琴。不知道为什么。 我也看不到你的了......但我只是拿走了你的并用上面的替换了 css,在 javascript 中我将宽度和高度都设置为 100%【参考方案3】:你在这里查看演示http://jsfiddle.net/zLc2s/1/
您需要计算文档高度,并根据新高度调整播放器的高度。
$(document).ready(function ()
$('.video-container').css('height', $(window).height());
);
【讨论】:
谢谢。但这使得视频的高度甚至超过了窗口本身的高度。有什么线索吗? 你可以使用 window.innerWidth 或 $(document).height();插入 $(window).height() 您已经为此更新了小提琴。但是,它的侧面仍然有一个滚动条。我不确定我可能会错过什么。【参考方案4】:这很容易做到,使用vh
单位:
iframe
width: 100%;
height: 100vh;
display: block;
这是更新后的fiddle。
(有时最简单的解决方案是最好的)
【讨论】:
以上是关于使 Youtube 视频响应网页中心的主要内容,如果未能解决你的问题,请参考以下文章
如何使 YouTube 播放器缩放到页面宽度,同时保持纵横比?