Bootstrap responsive-embed странное поведение

Question

Я пытаюсь использовать отзывчивую вставку bootstrap для встраивания видео YouTube, но по какой-то причине он вообще не отображается на странице. Я знаю, что это на странице, поскольку я использую программу чтения с экрана, которая читает ее, и я могу играть в нее и слышать звук, но визуально это вообще не отображается. Любая идея, что я делаю неправильно?

Мой код:

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

Answer 1

Ваш видеоплеер не видно, потому что по умолчанию CSS Boostrap устанавливает .embed-responsive высоту 0px.

// 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.