Think of me

by zachreynolds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script>
<!DOCTYPE html>
<html>
<iframe class="stretch" sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts" frameborder="0" name="<proxy>" src="https://null.jsbin.com/runner"></iframe>

  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    
    
    <script src="https://static.jsbin.com/js/prod/runner-4.1.7.min.js"></script>
    <div id="player"></div>
    
    <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);
    </script>
  </body>
</html>

JavaScript

var section = {
  start: 122,
  end: 210
};

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

function onPlayerReady(event) {
  player.seekTo(section.start);
  player.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var duration = section.end - section.start;
    setTimeout(restartVideoSection, duration * 1000);
  }
}

function restartVideoSection() {
  player.seekTo(section.start);
}