<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>
    <div id="player2"></div>
    <br/>
    <p>
      <strong>Expected behavior:</strong><br/><br/>
      The video should loop starting from 5 seconds and ending at 10 seconds.
    </p>
    <p>
      <strong>Actual result:</strong><br/><br/>
      The video loops from 0 because it's actually going to the next video in the playlist.
    </p>
    <p>
      <strong>Notes:</strong><br/><br/>
      This is a non-issue with flash player where I could set playlist: ',' and the video would loop correctly within the start and end time-frame.
      Since Chrome now defaults to HTML5, I am forced to set playlist to videoId. This breaks the functionality.
    </p>

    <script>
      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, player2;
      
      
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'tu0qtEwb9gE',
                playerVars: {
                  start: 5,
                  end: 10,
                  loop: 1,
                  playlist: 'tu0qtEwb9gE',
                  rel: '0',
                  iv_load_policy: '3'
                },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        
      }

      function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute();
      }

      function onPlayerStateChange(event) {
      }

    </script>
  </body>
</html>
// Code goes here

/* Styles go here */