如何使 youtube 视频与背景图像一起响应？答案

【问题标题】：How can I make youtube video responsive along with background image?如何使 youtube 视频与背景图像一起响应？
【发布时间】：2013-07-03 19:13:26
【问题描述】：

我有响应式背景，我想在该背景上放一段 YouTube 视频（不是全宽）。

这里我试过了。

http://jsfiddle.net/audetwebdesign/EGgaN/#run

HTML：

<div class="bg-image">
            <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
             <iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
        </div>

CSS：

.bg-image {
position: relative;
}  
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

【问题讨论】：

您希望 iframe 始终为 560 宽度？还是 100%？
最大 560，然后为移动设备减少它

标签： html css responsive-design

【解决方案1】：

这是一个从你的小提琴中分叉出来的 jsfiddle，它以图像为背景，以及一个以响应式 youtube 视频为中心的视频。使图像具有position:absolute 使其脱离正常流程并允许嵌入的视频保持在顶部。

响应式视频代码的诀窍是将嵌入的视频包装在一个具有最大宽度的容器中，然后添加填充以保持视频的正确纵横比。然后确保iframe、object 和embded 元素都适合该容器宽度的 100%，同时也不会比原始大小高：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    max-height: 320px;
}

http://jsfiddle.net/QRkL9/

更多关于上述代码 - http://avexdesigns.com/responsive-youtube-embed/

【讨论】：

【解决方案2】：

braican 是正确的，但视频容器上的 56.25% 会在您的视频之后留下大量填充。只需将所有内容包装在另一个 div 中，最大高度为 320px 并溢出：隐藏以隐藏额外的填充；

【讨论】：