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>

Link to website here.

当我第一次加载此页面时，我对此解决方案的看法（并且不喜欢）是我的视频扩展到我的屏幕下方。所以我想要一种方式来说明我的图片和视频的大小与屏幕大小的比例，以便我的视频调整大小以保持在屏幕的边界内。

我在互联网上寻找想法（即css编辑as in here），但我迷路了，或者没有按照我的预期行事。

有什么想法吗？

Answer 1

如果您只是添加一个CSS条目来指定视频的最小高度，它将不会在加载时剪切它，并且bootstrap将负责在调整大小时保持它的比例。代码：

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

当然，您可能希望更具体地针对div，但我认为这应该是您所追求的。

Answer 2

我会以不同的方式解决此问题，我不会使用绝对定位元素进行视频，我会设置height或min-height以使用视口单元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>

响应式视频默认大小

2 个答案: