Question

我正在使用embed-responsive-16by9来改变基于列的引导程序布局中某些嵌入视频的大小：

    <div class="row">
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9 concept-video">
                <iframe src="" width="476" height="268" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9 concept-video">
                <iframe src="" width="476" height="268" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
    </div>

当屏幕较小时，列堆叠而不是彼此相邻（因为它们应该），此时视频变得比我需要的更宽，所以我使用css来设置最大宽度div：

.concept-video {
    max-width: 476px;
}

这是设置最大宽度，但视频的高度仍然与没有最大宽度的高度相同，因此它们在iframe的上方和下方都有黑色空间。如何使视频的高度相对于宽度正确？

我已尝试将max-height设置为max-width的正确高度，但这没有效果：

.concept-video {
    max-width: 476px;
    max-height: 268px; !important
}

Answer 1

尝试删除concept-video之类的自定义CSS，然后尝试以下代码。

<div class="col-md-6">
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
 </div>
</div

如果你想在移动设备上看到彼此相邻的div，那么将您的div类更改为<div class="col-xs-6">

在bootstrap中使用响应式嵌入式iframe的最大宽度

1 个答案: