2016-11-10 7 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> 

上記のコードを使用すると、画像をクリックするとポップアップでビデオを開くことができます。 vimeo player linkをyoutube linkに置き換えた場合、私はポップアップで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> 

誰かがユーチューブのビデオは、ポップアップで開いたためにここに私を助けてもらえますか?

答えて

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> 
関連する問題