2016-11-10 72 views
0

我想使用jQuery的iframe彈出來彈出一個youtube視頻點擊圖像。我連續排列了許多圖像,當我點擊圖像時,youtube視頻應該在彈出窗口中打開,以便播放它。我想下面的代碼:Youtube視頻彈出的圖像點擊使用JQuery Iframe

<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

您無法直接從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> 
相關問題