2017-02-21 45 views
0

我对响应式YouTube视频有以下代码,但它根本不显示。当我删除课程,视频显示,但其宽度非常短。 Here是托管它的网站。如在网站上显示YouTube视频在添加响应式课程后不显示

<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> 
+0

需要包括重现您的问题,所以我们有一个[MCVE]请代码。 –

+0

@MichaelCoker:添加了详细信息。 –

+0

[将YouTube视频缩小为响应宽度](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – pol

回答

2

YouTube网址是错误的。在URL中将v替换为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>

+0

将此代码添加到网站上。在网站上不起作用。 –

+0

网址不是问题。尝试在新标签中打开它。 – pol

+0

@pol这是一个youtube iframe嵌入 - 必须使用'/ embed /'不要调用'/ v /'http://codepen.io/anon/pen/YNmoKg在浏览器选项卡上可以正常工作,但不能来自iframe。 –