响应式视频默认大小答案

【问题标题】：Responsive video default size响应式视频默认大小
【发布时间】：2017-04-10 01:52:30
【问题描述】：

我有一个使用引导程序的网站，在我的页面的核心我有一张图片，下面是嵌入的 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）但我迷路了，或者它没有达到我的预期。

有什么想法吗？

【问题讨论】：

如果您只想使用 css 并将标题图像和嵌入视频保留在折叠内，您可以在大分辨率下为 .container 类分配小宽度。如果将 1170px 替换为 970px，则两个元素都将在最大化浏览器窗口的折叠内保持可见。

标签： html css responsive-design youtube responsive

【解决方案1】：

我会采取不同的做法，我不会对视频使用绝对定位元素，我会设置 height 或 min-height 以使用视口单位 vh

所以它可能看起来像：

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

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

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

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

最后，我会将</div> 移动到您的footer 上方，从而将footer 完全移出引导容器。

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

【讨论】：

【解决方案2】：

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

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

当然，您可能希望更具体地定位 div，但我认为这应该满足您的需求。

【讨论】：