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: