Detect click on parent element of an iframe

Question

I have 2 iframes which are both embedded Youtube videos. I want to have it so when a user clicks on one of the videos, it will always pause the other video (to ensure both videos are never playing at the same time.)

Below is a sample of my JS

  jQuery( "#video1" ).click(function() {
    console.log("test");
    jQuery('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
    this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
  });

Below is my HTML

<div id="video1" class="col-12 col-md-6 mb-3 mb-md-0">
    <iframe src="https://www.youtube.com/embed/6TI2fdKrT**?&amp;theme=dark&amp;autoplay=1&amp;autohide=2&amp;rel=0&amp;enablejsapi=1" style="width: 100%; height: 270px;"></iframe>
 </div>

<div id="video2" class="col-12 col-md-6 mb-3 mb-md-0">
    <iframe src="https://www.youtube.com/embed/5TI2fdKrT**?&amp;theme=dark&amp;autoplay=1&amp;autohide=2&amp;rel=0&amp;enablejsapi=1" style="width: 100%; height: 270px;"></iframe>
 </div>

The issue I am having is that my click function won't trigger on the #video1 div whilst there is an iframe inside. I tested this by removing the iframe from inside the #video1 div and adding some text and clicking on it and it triggered.

How am I able to get my click function to trigger on the #video1 div whilst there is a iframe inside of it?

Is not possible in cross origin iframe due to *"same origin policy"* — charlietfl, Nov 04 '18 at 20:23
@charlietfl so even though I am not directly interacting with the iframe, it still comes under the same origin policy? — Gazz, Nov 04 '18 at 20:24
Yes...the event occurs inside the window created by iframe and you can not access that window. You need to work with the youTube API — charlietfl, Nov 04 '18 at 20:25
But you might be able to use youtube api so when one starts you make all others stop — charlietfl, Nov 04 '18 at 20:27
Or get creative and create overlays that get clicked on. I haven't used that api in several years — charlietfl, Nov 04 '18 at 20:29

Detect click on parent element of an iframe

0 Answers0