ブートストラップレスポンス埋め込み不思議な振る舞い

Question

私はブートストラップのレスポンシブル埋め込みを使用して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が0PXする.embed-responsive高さを設定しますので、あなたのビデオプレーヤーが表示されていません。

// 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を参照してください。