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

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/