title: Event Handler not getting triggered on Youtube Iframe Video State change
body: <p>I need the Carousel to stop when someone click the video to play it.
  As per the docs, I need to use
      $('.owl-carousel').trigger('stop.owl.autoplay');</p>
  
  <p>The Youtube video is embedded via iframe.
  I refered: <a href="https://stackoverflow.com/questions/24964232/how-to-fire-function-on-embedded-youtube-iframes-end">How to fire function on Embedded YouTube iFrame&#39;s end</a>
  But, it isnt working. I'm getting warning in Console that webkitURL is deprecated.</p>
  
  <p>Error Log:</p>
  
  <pre><code>[Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
  (unknown) [Deprecation] 'webkitURL' is deprecated. Please use 'URL' instead.
  (anonymous)
  g
  z.Y
  n
  N
  d
  v
  z
  e.zKz
  e.bg
  wf @ www-embed-player.js:405
  (anonymous) @ www-embed-player.js:404
  f @ www-embed-player.js:377
  (anonymous) @ www-embed-player.js:332
  </code></pre>
  
  <p>Is there a different way to trigger handler on Video State changed? </p>
  
  <p>Trigger to the Iframe container div works if I click in the white space to the left &amp; right of the Youtube video:</p>
  
  <pre><code>$( ".item" ).click(function() {
  //alert( "Handler for .click() called." );
  $('.owl-carousel').trigger('stop.owl.autoplay');
  });
  </code></pre>
  
  <p>But, if I use the Youtube API to trigger handler on Video Play state change, it doesnt work:</p>
  
  <pre><code>//This code loads the IFrame Player API code asynchronously.
  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 player1;
  function onYouTubePlayerAPIReady() {
  player1 = new YT.Player('ytplayer', {
  events: {
  'onStateChange': ShowMe
  }
  });
  }
  
  function ShowMe() {
  console.log("ShowMe triggered");
  alert("ShowMe called");
  
  var sStatus;
  sStatus = player.getPlayerState();
  if (sStatus == -1) alert("Video has not started.");
  else if (sStatus == 0) {  $('#ytplayer').replaceWith('&lt;a href="page/" target="_blank"&gt;&lt;img class="special_hover" src="image" alt="" /&gt;&lt;/a&gt;')
  //change above function to react to when the player stops.
  }
  else if (sStatus == 1) {alert("Video has started.") } //Video is playing
  else if (sStatus == 2) {alert("Video has paused.")}  //Video is paused
  else if (sStatus == 3) { } //video is buffering 
  else if (sStatus == 5) { } //Video is cued.
  }
  </code></pre>
  
  <p>Currently, I'm testing this on the first video in carousel:</p>
  
  <pre><code>&lt;div class="owl-carousel"&gt;
  &lt;div class="item"&gt;                   
  &lt;iframe id="ytplayer" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;enablejsapi=1" frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;              
  &lt;/div&gt;
  &lt;div class="item"&gt;
  &lt;iframe id="ytplayer1" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;enablejsapi=1" frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;  
  &lt;/div&gt;
  &lt;div class="item"&gt;
  &lt;iframe id="ytplayer2" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;enablejsapi=1" frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;  
  &lt;/div&gt;
  &lt;div class="item"&gt;
  &lt;iframe id="ytplayer3" width="85%" height="220" src="https://www.youtube-nocookie.com/embed/1RA2Zy_IZfQ?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;enablejsapi=1" frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/shaileshghadge/hoe4jfcp/" rel="nofollow noreferrer">https://jsfiddle.net/shaileshghadge/hoe4jfcp/</a></p>