CODEWITHSUNDEEP
jqueryhtmliframeyoutubepopup
Sriram Chandramouli
Sriram Chandramouli

Reputation: 119

Youtube video popup on image click using JQuery Iframe

I am trying to use jquery iframe popup to popup a youtube video on clicking an image. I have many images arranged in a row and when I click the image, youtube video should be opened in popup, so that it can be played. I am trying below code:

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

By using the above code, I am able to open the video in popup on clicking the image. If I replace vimeo player link with youtube link, I am not able to get the youtube video in the popup but instead popup alone opens without any video. I am using the code as below replacing vimeo link by youtube link.

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

Could someone help me here to have the youtube video opened in popup?

Upvotes: 0

Views: 3231

Answers (1)

Viginesh
Viginesh

Reputation: 258

You can't directly copy YouTube link from URL and use it in an iFrame. Follow the following steps:

  1. Open YouTube video
  2. Click Share and choose "Embed" tab next to share
  3. Copy the iframe content or the src from there and use it

For the video in your code, you can use this:

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

Upvotes: 1

Related Questions