Using Youtube Player API inside Mechanical Turk crowd-form doesn't fire OnStateChange

Question

I am trying to get a youtube iframe inside to put on amazon mechanical Turk.

However, if the youtube player <div> is placed inside it doesn't fire the event "onStateChange".

Here is a minimal code to reproduce. In this case, OnStateChange doesn't fire when video is paused:

<!DOCTYPE html>
<html>
  <body>
  <script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
    <crowd-form>
    <div id="player"></div>  <!-- This doesn't print YOLO on StateChange-->
    </crowd-form>

    <script>
      // 2. 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);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
    console.log('Yolo')
      }

    </script>
  </body>
</html>

In this case OnStateChange does fire when video is paused, but I need it inside to put on mechanical Turk.

<!DOCTYPE html>
<html>
  <body>
  <script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
    <div id="player"></div> <!-- This does print YOLO on StateChange-->
    <crowd-form>
    </crowd-form>

    <script>
      // 2. 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);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
    console.log('Yolo')
      }

    </script>
  </body>
</html>

I was wondering why this is happening and how this could be resolved.

Thanks.

I think this might be relevant: https://stackoverflow.com/questions/38861601/how-to-only-trigger-parent-click-event-when-a-child-is-clicked — martianwars, May 29 '20 at 20:05

Using Youtube Player API inside Mechanical Turk crowd-form doesn't fire OnStateChange

0 Answers0