Bootstrap响应嵌入奇怪的行为

Question

我想使用引导的响应嵌入嵌入YouTube视频，但由于某种原因，它不显示在网页上。我知道它在页面上，因为我正在使用屏幕阅读器读取它，我可以播放它并听到声音，但在视觉上它根本不显示。 任何想法我做错了什么？

我的代码：因为自举的默认设置CSS高度.embed-responsive为0px

<div class="embed-responsive"> 
    <iframe class="col-md-4 embed-responsive-item" src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div> 

Answer 1

您的视频播放器是不可见的。

// From Bootstrap 3.3.7 
.embed-responsive { 
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden; 
} 

要显示您的视频播放器，您需要设置高度。看着Bootstrap's embed-responsive documentation，它们提供了一些可选尺寸：

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class=" col-md-4 embed-responsive-item" src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
    <iframe class=" col-md-4 embed-responsive-item" src="https://www.youtube.com/embed/b2l9tqv0AHs"></iframe> 
</div> 

或者，你可以自定义CSS设置自定义的高度：

.embed-responsive { height:100px; } 

见live JSFiddle demo。