Bootstrap 3：将视频拟合到网格答案

【问题标题】：Bootstrap 3: Fitting video to gridBootstrap 3：将视频拟合到网格
【发布时间】：2016-01-04 08:59:45
【问题描述】：

我有多个视频，我想将其调整为网格格式的父引导 div，但奇怪的是它增加了 col 的大小，而不是视频本身。

这里是代码如何以网格格式运行的示例。在我的 CSS 文件中，类 gif-video 的宽度和高度都设置为 300。

这是代表我的问题的image。

如果我将 gif 视频的宽度和高度更改为 100%，这就是它的样子。大小是正确的，但有空格，好像 div 被推下一样。

这是一个代表这个问题的image。

<div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">     
                    <source src=<%= gif.webmurl %> type="video/webm">
                    <source src=<%= gif.mp4url %> type="video/mp4">
                </video>  
            </div>
     </div>
</div>

【问题讨论】：

视频附加了纵横比（16/9、4/3 等...），因此您的容器/网格应该与英尺具有相同的纵横比。
很抱歉，我是 bootstrap 新手，但如何将它们设置为具有相同的纵横比？当我在加载视频之前刷新页面时，它们具有正确的布局，但是当渲染视频时，网格出现了错误。
阅读这篇文章，也许对你有帮助 - getbootstrap.com/components/#responsive-embed

标签： html css twitter-bootstrap

【解决方案1】：

将 max-height 和 max-width 设置为 div ，一些视频必须稍大一些，并且可能会将填充推到右侧或底部

【讨论】：

在哪里设置？我只是将它们都设置为100％吗？我注意到当我刷新页面时，布局正是我想要的，但是当页面加载时，它被推下。