0

我有响应式背景，我想在该背景上放一个 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;
}
4

2 回答 2

5

这是一个从你的小提琴中分叉出来的 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/

于 2013-07-03T19:29:32.583 回答
0

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

于 2016-06-22T12:56:12.743 回答