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

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

.视频吧{
背景：url（images/slice/video image.png）无重复中心滚动；
背景尺寸：封面；
宽度：100%；
身高：453px；
}

为了使这项工作顺利进行，我不得不改变很多东西，所以我不会一一列出。一个主要问题是，如果使用速记

background

属性，则

background size:cover

不起作用

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

。视频条{
背景图片：url(http://oi60.tinypic.com/294rtyu.jpg);
背景尺寸：封面；
背景位置：34%为顶部；
}
.视频包装器{
利润率最高：22%；
填充：60px 40px；
}

---

调整填充和背景位置以适应。如果背景图像的视频框居中，则会简化操作。

您的iframe不应位于具有图像“覆盖”的div层内。因为这样它就嵌入到覆盖层中，而不是将覆盖层“覆盖”在iframe上

我想你要找的更像这样：

---

---

嗯，您的CSS不包含在标记中。但绝对或相对定位是你需要做的。或者使用您的图像作为背景。您好，感谢您的努力，请查看此图像，以实现您需要完全不同的方法。您必须在视频顶部覆盖一个部分透明的图形，这将禁止用户和控件交互。然后你必须在页面的另一个区域设置单独的控件。谢谢你的回答，但是如果你看到我无法控制帧内的视频。这就是我要寻找的，我如何控制它。我实际上只是更新了一点代码，以便更好地显示。但是，您希望控制帧内的视频是什么意思？你的意思是显示控件吗？如果是，请查看我的更新。您可以根据需要调整高度和边距。您是否尝试过缩放小提琴面板？您的示例仅适用于一种大小。它没有响应。@James是的，我试图控制帧内的视频播放和暂停，但我无法控制do@Yogiji我懂了。您可能需要使用YouTube的API并为函数创建自己的按钮。

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

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