CODEWITHSUNDEEP
jqueryvideoiframeclick
user2744032
user2744032

Reputation: 467

jQuery click on iframe video (youtube)

I have an html iframe that contains just an embeded youtube video. I'm trying to perform an action when the user clicks the video/iframe but does not work. Here is code:

html:

<iframe id="myVideo" autoplay="true" src="https://www.youtube.com/embed/pyvGEnmv1E0"></iframe>

jQuery:

$(function(){
  //line in question:
  $('#myVideo').contents().find("body").click(function(){
    //perform action here
  });
});

On the "line in question" above, I have also tried the more simple-

$('#myVideo').click(function(){});

but that fails also. Any help is wonderfully appreciated.

Andrew

Upvotes: 2

Views: 2729

Answers (1)

David
David

Reputation: 371

If you don't need click events to get through to the iFrame, you could use an overlay, and capture the click event on that.

Like this:

HTML:

<div id="myVideoWrapper">
    <iframe id="myVideo" autoplay="true" src="https://www.youtube.com/embed/pyvGEnmv1E0"></iframe>
    <div id="myVideoOverlay"></div>
</div>

CSS:

#myVideoWrapper {
    position:relative;
}

#myVideoOverlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

JS:

$(function(){
    $('#myVideoOverlay').click(function(){
        alert('clicked');
    });
});

Upvotes: 3

Related Questions