Question

当我的浏览器窗口缩小时，我的主要div中的YouTube视频不会随浏览器缩小。我尝试了一些我在网上找到的代码来解决＆＃34;解决问题。问题，但它从来没有变得很好，并没有看起来很好。我最大的问题是，随着浏览器窗口的缩小，视频从未停留在中心位置。

这是网站上的代码：

HTML：

<div class="video-container">
     <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>

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%;
}

问题：是否有人知道如何让嵌入式YouTube视频在其所在的div中保持居中（垂直和水平）时能够快速响应？

这是我的代码：http://jsfiddle.net/MyersAN/xk700bng/

Answer 1

我尝试过这个课程

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

并使用youtube嵌入代码添加div元素

<div class="videowrapper">
    <iframe width="560" height="349" src="link" frameborder="0" allowfullscreen></iframe>
</div>

它有效，您也应该使用演示代码跟随this教程。

自适应嵌入式YouTube视频代码无效

1 个答案: