响应视频默认大小

Question

我有一个使用bootstrap的网站，在我的页面核心上，我有一张图片，下面是一个YouTube视频：

    <div class="col-xs-12 col-sm-12">
      <a href="tech.php">
        <img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600">
      </a>
      <br>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe>
      </div>
    </div>

在此处链接到网站。

首次加载此页面时，我对此解决方案（和不喜欢）看到的是我的视频在屏幕下方延伸。因此，我正在采用一种说明我的图片和视频的大小为屏幕大小的比例，以便我的视频大大保持在屏幕的边界内。

我已经在互联网上寻找想法（即CSS编辑如这里），但我迷路了，或者它没有做我期望的。

有什么想法？

Answer 1

如果您只添加一个CSS条目来指定视频的最小高度，则不会在负载上夹住它，并且引导程序将在调整大小的情况下保持其比例。代码：

.embed-responsive{
  min-height:100%;
}

当然，您可能希望更具体地将Div定位为div，但我认为这应该做您追求的事情。

Answer 2

我会以不同的方式进行此操作，我不会为视频使用绝对定位的元素，并且我将设置height或min-height使用viewport单位vh

所以看起来像：

#youtube-video {
    width: 100%;
    min-height: 40vh;
}

并删除该元素上的所有绝对定位。

此外，您可能需要在顶部容器上设置ID或类，并给它一些margin-top以抵消固定标头：

#top-container {
    margin-top: 50px;
}

最后，我将footer完全移动到引导程序容器外，将</div>移至footer上方。

<div class="container">
....
</div>
<footer class="footer">
...
</footer>