Youtubeビデオをbootstrap 3.0ページに適切に埋め込む
レスポンシブサイトにYouTubeビデオを埋め込む必要がありますが、特にモバイルでは正しくスケーリングされません。デスクトップとタブレットでは問題なく表示されますが、ビューポートの幅が600を下回ると、ビデオはコンテナを破壊します。モバイルで動画全体を表示するには、コンテンツの残りの部分が画面の約1/2だけ垂直にいっぱいになるまでピンチアウトする必要があります。あまり良くない。
テキストコンテンツの幅を1/3にし、ビデオをデスクトップとタブレットで2/3幅にし、モバイルではビデオとコンテンツの両方をビューポート幅の100%にスタックします。 iframeでwidth = "100%"を使用しようとしましたが、サイズを変更するとビデオが伸びたり縮んだりして高さが正しくスケーリングされません。
また、ストックbootstrap 3.0の上にスタイルシートを置くだけなので、CSSでそれを行う必要があります。
これが私のコードです:
<div class="container">
<div class="row">
<div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
<div class="col-sm-8">
<iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Bootstrap3ネイティブソリューションがあります: http://getbootstrap.com/components/#responsive-embed
Bootstrap 3.2.0以降
Bootstrap <v3.2.0を使用している場合は、v3.2.0の「responsive-embed.less」ファイルを調べてください。場合によっては、このコードを使用またはコピーできます(v3で機能します。 1.1)。
私はそれが遅いことを知っています、私はboostrap.cssに追加された古いカスタムテーマと同じ問題を抱えています:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
そしてビデオの場合:
<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
また、ブートストラップでサイトをスタイルする方法にも依存します。私の例では、ビデオdivにcol-md-12を使用し、iframeにクラスcol-sm-12を追加しているため、小さな画面にサイズ変更すると、ビデオはスクイーズ表示されません。 iframeにも高さを追加します。
<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>
ブートストラップによって柔軟にできる何かの中にビデオをラップすることについて考えてください。
bootstrapは魔法のツールではなく、単なるレイアウトエンジンです。あなたの例ではほとんどそれを持っています。
bootstrapが提供するグリッドを使用して、iframeの厳密なサイズ設定を削除してください。グリッドのbootstrapクラスガイドを使用します。
例えば:
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
解像度を指定すると、iframeのクラスがどのように変化するかがわかります。
フィッデルも: http://jsfiddle.net/RsSAT/
まあ、それはシンプルで簡単な解決策を持っています。あらゆるデバイスや画面サイズに合わせてビデオを簡単に作成できます。 HTMLとCSSのコードは次のとおりです。
.yt-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.yt-container iframe, .yt-container object, .yt-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="yt-container">
<iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>
ソース: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
私もbootstrap 3.xを使用し、レスポンシブyoutubeビデオの埋め込みに対応する次のコードは私にとって魅力的です。
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
別のスレッドで同様の回答をしました( YouTubeビデオをレスポンシブ幅に縮小する )が、ここでも私の回答が役立つと思います。
これは私のためにうまくいきます...
.delimitador{
width:100%;
margin:auto;
}
.contenedor{
height:0px;
width:100%;
/*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
padding-top:56.25%; /* Relación: 16/9 = 56.25% */
position:relative;
}
iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}
その後
<div class="delimitador">
<div class="contenedor">
// youtube code
</div>
</div>