How can I make youtube video responsive along with background image?

问题

I have responsive background and I want to have a YouTube video over that background(not in full width).

Here I have tried doing it.

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;
}

回答1:

Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.

The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:

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

More about the above code - http://avexdesigns.com/responsive-youtube-embed/

回答2:

braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;

来源：https://stackoverflow.com/questions/17456308/how-can-i-make-youtube-video-responsive-along-with-background-image