2017-11-29 10 views
1

私はブートストラップページでYouTubeビデオを使用しようとしていますが、何らかの理由でサンプルビデオが動作していますが、私が置いたビデオはページ上で動作していません。Youtubeビデオがブートストラップで動作しない

コードはhttps://codepen.io/brachu21/pen/QOJNXdです。

HTML:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <h2>16:9 Responsive Aspect Ratio</h2> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <h2>4:3 Responsive Aspect Ratio</h2> 
      <div class="embed-responsive embed-responsive-4by3"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=Th29zm5u8yM"></iframe> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:あなたは、YouTubeの動画の間違ったバージョンを持っているよう

.container { 
    background: #e3e3e3; 
    margin-bottom: 20px; 
    padding-bottom: 50px; 
} 
h1, 
h4 { 
    text-align: center; 
    margin-bottom: 50px; 
} 
h1 i { 
    color: pink; 
} 

答えて

2

が見えます。埋め込みリンクを使用する必要があります。第二のビデオのために、このリンクを使用してみてください:https://www.youtube.com/embed/Th29zm5u8yM

.container { 
 
    background: #e3e3e3; 
 
    margin-bottom: 20px; 
 
    padding-bottom: 50px; 
 
} 
 
h1, 
 
h4 { 
 
    text-align: center; 
 
    margin-bottom: 50px; 
 
} 
 
h1 i { 
 
    color: pink; 
 
}
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <h2>16:9 Responsive Aspect Ratio</h2> 
 
      <div class="embed-responsive embed-responsive-16by9"> 
 
       <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <h2>4:3 Responsive Aspect Ratio</h2> 
 
      <div class="embed-responsive embed-responsive-4by3"> 
 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Th29zm5u8yM"></iframe> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

関連する問題