0

I have a div container with image and youtube iframe inside. I need to detect click and hover events on this container for expanding this div. All events work fine, but if I click on youtube iframe no click event for div triggering, it just starts playing video. So how can I override youtube iframe click event for my purposes?

pookeeshtron
  • 135
  • 1
  • 1
  • 8
  • 1
    Try [stackoverflow.com/questions/1609741](https://stackoverflow.com/questions/1609741). Additionally, YouTube provides a [very simple API](https://developers.google.com/youtube/iframe_api_reference). – graphemecluster Mar 15 '21 at 07:03
  • @graphemecluster Thanks. Found the solution to control this things with a help of onPlayerStateChange. Just thought there could be a simplier solution like forbidding click on youtube iframe – pookeeshtron Mar 16 '21 at 14:04
  • Just put `pointer-events: none;` to the iframe css. – graphemecluster Mar 17 '21 at 00:43

1 Answers1

0
//Its Possible by capturing the stateChange in the video --
//HTML code----

<!DOCTYPE html>
<html>
  <body>
    <div id='vidWrapper'>
    //your iframe tag goes here.
    <iframe id="video-id-first" src="https://www.youtube.com/embed/nNlEiuqiKAk?enablejsapi=1&amp;origin=http%3A%2F%2F3.7.232.244" gesture="media" allow="encrypted-media" allowfullscreen="" data-gtm-yt-inspected-53610233_3="true" width="560" height="400" frameborder="0"></iframe>
    </div>
   </body>
</html>

//JS code ----

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var width = document.getElementById("video-id-first").getAttribute("width");
var height = document.getElementById("video-id-first").getAttribute("height");
var src = document.getElementById("video-id-first").getAttribute("src");
//splitting to get the videoId from src.
var partsArr = src.split("/");
var videoSource = partsArr[partsArr.length -1 ].split("?");
var videoId = videoSource[videoSource.length -2 ];

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('vidWrapper', {
          height:height,
          width: width,
          videoId: videoId,
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                startVideo();
              }
                if (event.data == YT.PlayerState.PAUSED) {
                stopVideo();
              }
            }
          }
        });
      }
      function startVideo() {
      //write your functionality here.
        alert('Video Started');
      }
       function stopVideo() {
       //write your functionality here.
        alert('Video Paused');
      }
Nives pandey
  • 11
  • 1
  • Please don't copy/paste the exact same answer in multiple question. Try to explain why this answer reply to the specific question that you are answering – Elikill58 Nov 01 '21 at 23:15