如何使 youtube 视频与背景图像一起响应? [英] How can I make youtube video responsive along with background image?

问题描述

我有响应式背景，我想在该背景上播放 YouTube 视频(不是全宽).

这里我已经尝试过.

http://jsfiddle.net/audetwebdesign/EGgaN/#run

HTML:

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

CSS:

.bg-image {位置:相对；}.bg-image img {显示:块；宽度:100%；最大宽度:1200px；边距:0 自动；}.bg 图像 iframe {位置:绝对；底部:0；左:0；右:0；}

解决方案

这是一个从您的小提琴分叉出来的 jsfiddle，以图像为背景，以及一个以 youtube 视频为中心的响应式视频.使图像具有 position:absolute 使其脱离正常流并允许嵌入的视频保持在顶部.

响应式视频代码的技巧是将嵌入的视频包装在具有最大宽度的容器中，然后添加填充以保持视频的正确纵横比.然后确保 iframe、object 和 embded 元素都适合该容器宽度的 100%，同时也不会变得比原生尺寸:

.video-container {位置:相对；填充底部:56.25%；填充顶部:30px；高度:0；溢出:隐藏；宽度:100%；最大宽度:560px；边距:0 自动；}.video 容器 iframe，.video 容器对象，.video-container 嵌入 {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；最大高度:320px；}

http://jsfiddle.net/QRkL9/

有关上述代码的更多信息 - http://avexdesigns.com/responsive-youtube-embed/

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

解决方案

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/

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