用响应式视频填充bootstrap列背景

Question

我正在制作一个网站网格，显示新的公告和博客帖子。我有一个大的专栏（col-sm-8，跨越页面的2/3），我希望有一个介绍视频（解释/展示工作）适合。

我似乎无法将视频作为背景播放（尝试使用YouTube嵌入式和互联网上的几个教程）我已创建了一个图像以便在下面更好地解释：

任何帮助，或者只是朝着正确的方向推进都会非常感激！

由于

更新图片以获得更好的比例：

Answer 1

您无法获得YouTube视频或任何可在该区域内显示的视频，因此我建议您将为视频分配的房间调整为更大的视频尺寸

Answer 2

这是一个响应式youtube嵌入代码。宽度和高度由youtube给出。你需要提出你想要的页面的其余部分。

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FSvNhxKJJyU" frameborder="0" allowfullscreen></iframe>
</div>