sinanisler logo

Youtube Timestamp iFrame Video, Embed Website

html:

<div class="video-wrapper" id="iframe-video">
  <div class="video" id="player"></div>
</div>

<div class="controls">
  <ul>
    <li>
      <a href="#iframe-video" class="seeker-button ripple" data-youtube-seek="60">
        <span>Timestamp title</span>
        <span>00:01:00</span>
      </a>
    </li>
    <li>
      <a href="#iframe-video" class="seeker-button ripple" data-youtube-seek="120">
        <span>Timestamp title</span>
        <span>00:02:00</span>
      </a>
    </li>
    <li>
      <a href="#iframe-video" class="seeker-button ripple" data-youtube-seek="180">
        <span>Timestamp title</span>
        <span>00:03:00</span>
      </a>
    </li>
  </ul>
</div>

js:

var ytID = 'BQZKs75RMqM';

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;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: ytID // YouTube video ID
  });
}

document.addEventListener('DOMContentLoaded', function() {
  var buttons = document.querySelectorAll('.controls .seeker-button');
  buttons.forEach(function(button) {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      var time = this.getAttribute('data-youtube-seek');
      player.seekTo(time, true);
      window.scrollTo({
        top: document.getElementById('player').getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
      });
      this.blur();
    });
  });
});

demo:

Leave the first comment