如何让youtube视频响应与背景图片？ [英] How can I make youtube video responsive along with background image?

问题描述

我有自适应背景，我想在该背景上有一个YouTube视频（不是全宽）。

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

这里我尝试过。

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

推荐答案

这里有一个jsfiddle具有图像作为背景的小提琴，以及以中心为响应的YouTube视频。使图像具有 position：absolute ，使其脱离正常流程，并允许嵌入的视频保持在顶部。

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.

响应式视频代码的技巧是将嵌入视频包装在具有最大宽度的容器中，然后还添加填充以保持视频的正确宽高比。然后确保 iframe ，对象和已封装元素都适合该容器的宽度的100％，同时也不会比本机大小更高：

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/

有关上述代码的详情 - http://avexdesigns.com/responsive-youtube-embed/

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

这篇关于如何让youtube视频响应与背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！