Youtube视频弹出的图像点击使用JQuery Iframe

Question

我想使用jQuery的iframe弹出来弹出一个youtube视频点击图像。我连续排列了许多图像，当我点击图像时，youtube视频应该在弹出窗口中打开，以便播放它。我想下面的代码：

<a href="#popupParis" data-rel="popup" data-position-to="window" data-  
transition="fade"><img class="popphoto" src="images/img1.jpg" alt="Paris, 
France" style="width:30%"></a> 

<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="a" 
data-tolerance="15,15" class="ui-content"> 
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a 
ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" 
height="298" seamless=""></iframe> 
</div> 

通过使用上面的代码，我能打开弹出窗口中的视频点击图像。如果我用youtube链接替换vimeo播放器链接，我无法在弹出窗口中获得YouTube视频，而是单独弹出而不显示任何视频。我使用的代码如下所示，用youtube链接替换vimeo链接。

<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="a" 
data-tolerance="15,15" class="ui-content"> 
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a 
ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
<iframe src="https://www.youtube.com/watch?v=PT2_F-1esPk" width="497" 
height="298" seamless=""></iframe> 
</div> 

有人可以帮助我在这里有弹出的YouTube视频打开吗？

Answer 1

您无法直接从URL复制YouTube链接并将其用于iFrame中。遵循以下步骤：

1. 开启YouTube视频
2. 点击分享，选择下一个“嵌入”选项卡共享
3. 复制iframe内容或SRC从那里，并用它

对于在你的代码中的视频，你可以使用这个：

<iframe width="560" height="315" src="https://www.youtube.com/embed/PT2_F-1esPk" 
frameborder="0" allowfullscreen></iframe>