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

时间:2016-11-10 01:22:06

标签: jquery html iframe youtube popup

我正在尝试使用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视频吗?

1 个答案:

答案 0 :(得分:1)

您无法直接从网址复制YouTube链接并在iFrame中使用它。请按照以下步骤操作:

  1. 打开YouTube视频
  2. 点击分享,然后选择分享
  3. 旁边的“嵌入”标签
  4. 从那里复制iframe内容或src并使用它
  5. 对于代码中的视频,您可以使用:

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