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: