Youtube iframe api seekTo

by onigetoc

HTML

<div id="player"></div>

<div>
<button id="btnSeek" data-seek="30.7">Seek 30</button>
<button id="btnSeek" data-seek="60">Seek 60</button>
<button id="btnSeek" data-seek="90">Seek 90</button>
<button id="btnSeek" data-seek="180">Seek 180</button>
</div>

CSS

body {
  margin: 10px
}

JavaScript

$.getScript('//www.youtube.com/iframe_api');

     var player;
     function onYouTubePlayerAPIReady() {
         player = new YT.Player('player', {
           height: '390',
           width: '640',
           videoId: '-HjpL-Ns6_A',
             playerVars: { 'start': 159, 'autoplay': 1, 'controls': 1, 'showinfo': 0, 'rel': 0 },
           events: {
             'onReady': onPlayerReady,
             'onStateChange': onPlayerStateChange,
           }
             
         });         
     }

function onPlayerStateChange(evt) 
{
    if (evt.data==1) 
    {
        // this will seek to a certain point when video starts
        // but you're better off using 'start' parameter
        // player.seekTo(22);   
    }
}

     function onPlayerReady(evt) {
         
        // doesn't work here
        // player.seekTo(30);  
         
         // lets make ure we have a function
         //alert("typeof(player.SeekTo) = " + typeof(player.seekTo));
     }

$(function() {
    
    $(document).on('click', '#btnSeek', function() {
        player.seekTo($(this).data('seek'), true);
    });
});