Question

我正在尝试将YouTube视频与此背景图片对齐：

 <div class="video-bar">
            <div class="container-fluid">
                <div class="row">
                    <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div> 
                </div>
            </div>
        </div>
<style>
        .video-bar {
        background: url(images/slice/video-image.png) no-repeat center center scroll;
        background-size: cover;
        width: 100%;
        height: 453px;
    }
</style>

Answer 1

我必须改变很多东西才能完成这项工作，所以我不会将它们全部列出来。主要原因是如果您使用速记background-size: cover属性，则background不起作用。

.video-bar {
    background-image: url(http://oi60.tinypic.com/294rtyu.jpg);
    background-size: cover;
    background-position: 34% top;
}
.video-wrapper {
    margin-top: 22%;
    padding: 60px 40px;
}

<div class="container-fluid">
    <div class="row video-bar">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="embed-responsive embed-responsive-16by9 video-wrapper">
                <iframe class="embed-responsive-item" src="..."></iframe>
            </div>
        </div>
    </div>
</div>

<强> Demo

根据需要调整填充和背景位置。如果背景图像的视频框居中，它会简化事情。

Answer 2

您的iframe不应位于包含图像＆＃34; overlay＆＃34;的div图层内。因为它嵌入在叠加层中，而不是放置覆盖层＆＃34; over＆＃34; iframe。

我认为你所寻找的更像是这样：

http://jsfiddle.net/tcg2nyLd/

.relative {
    position: relative;
}

.video-bar {
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://oi60.tinypic.com/294rtyu.jpg) no-repeat center center scroll;
    background-size: cover;
    width: 100%;
    height: 453px;
    z-index: 10;
}
.video-bar .container-fluid {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.video-wrapper {
    height: 350px !important;
    left: calc(50% - 395px);
    padding-bottom: 0 !important;
    position: absolute;
    top: 80px;
    width: 550px;
}

.video-wrapper iframe {
    height: 100% !important;
}

将视频元素与背景图像对齐

2 个答案: