html - 响应式嵌入式 YouTube 视频代码无法正常工作

Question

当我的浏览器窗口缩小时，我主 div 中的 YouTube 视频不会随浏览器一起缩小。我尝试了一些我在网上找到的代码来“解决”这个问题，但结果从来都不好，而且看起来也不太好。我最大的问题是，当浏览器窗口缩小时，视频永远不会居中。

这是网站上的代码:

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带有演示代码的教程。