Question

我有快速响应的背景，我希望在该背景上有一个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;
}

Answer 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/

Answer 2

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

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

2 个答案: