レスポンシブクラスを追加した後にYouTube動画が表示されない

Question

レスポンシブYouTube動画のコードは以下のとおりですが、表示されません。クラスを削除すると、ビデオは表示されますが、その幅は非常に短いです。 Hereは、それをホストするサイトです。サイトに表示されているように

<div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="<?php echo get_field("youtube_video");?>" frameborder="0" allowfullscreen></iframe> 
       <div class="more-videos"> 
        <button type="button" class="btn btn-warning">View More Videos From Matt</button> 
       </div> 
</div> 

HTML、

<div class="row"> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="http://www.youtube.com/v/lQ2EZdkLCfc&version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe> 
       <div class="more-videos"> 
        <button type="button" class="btn btn-warning">View More Videos From Matt</button> 
       </div> 
      </div> 
     </div> 

Answer 1

YouTubeのURLが間違っています。 vをURLのembedに置き換え、最初の&を?に置き換えて、クエリ文字列の開始を示しました。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row"> 
 
    <div class="embed-responsive embed-responsive-16by9"> 
 
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/lQ2EZdkLCfc?version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe> 
 
    <div class="more-videos"> 
 
     <button type="button" class="btn btn-warning">View More Videos From Matt</button> 
 
    </div> 
 
    </div> 
 
</div>