web-dev-qa-db-ja.com

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>
csstwitter-bootstrapyoutubeembed
57
TheHooligan

Bootstrap3ネイティブソリューションがあります： http://getbootstrap.com/components/#responsive-embed

Bootstrap 3.2.0以降

Bootstrap <v3.2.0を使用している場合は、v3.2.0の「responsive-embed.less」ファイルを調べてください。場合によっては、このコードを使用またはコピーできます（v3で機能します。 1.1）。

72
Dado

私はそれが遅いことを知っています、私は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>
24
Grégor González

また、ブートストラップでサイトをスタイルする方法にも依存します。私の例では、ビデオ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>
5
keenlio.com

ブートストラップによって柔軟にできる何かの中にビデオをラップすることについて考えてください。

bootstrapは魔法のツールではなく、単なるレイアウトエンジンです。あなたの例ではほとんどそれを持っています。

bootstrapが提供するグリッドを使用して、iframeの厳密なサイズ設定を削除してください。グリッドのbootstrapクラスガイドを使用します。

例えば：

<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">

解像度を指定すると、iframeのクラスがどのように変化するかがわかります。

フィッデルも： http://jsfiddle.net/RsSAT/

5
Pogrindis

まあ、それはシンプルで簡単な解決策を持っています。あらゆるデバイスや画面サイズに合わせてビデオを簡単に作成できます。 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/

4
Faruque Ahamed Mollick

私も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ビデオをレスポンシブ幅に縮小する ）が、ここでも私の回答が役立つと思います。

4
Pascal Klein

これは私のためにうまくいきます...

   .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>
3
Esteban