bookmarklet: getting current time of embedded iframe youtube player?

Question

I am novice javascript developer. I have a bookmarklet that can get the current time of a youtube video.

javascript:(function(){
    ytplayer = document.getElementById("movie_player");
    var secs = ytplayer.getCurrentTime();
    alert(`${secs}`);
})();

It works fine on youtube.com. However, when I apply the same logic to an iframe-based website (url here). According to youtube API reference, I use function onYouTubePlayerAPIReady(). but nothing happens when I run the bookmarklet. Here is the code

javascript:function onYouTubePlayerAPIReady() {
   var ytplayer = new YT.Player('widget2');
   var secs = ytplayer.getCurrentTime();
   alert(`${secs}`);
}

Does any youtube API expert can spot the issue?

Here is the iframe of the sample youtube from the website

user_3450122 · Answer

Yes. I have a similar need. I don't think you called the onYouTubeIframeAPIReady() function. This is the working code.

function onYouTubeIframeAPIReady() {
        var player = new YT.Player('widget2', {//The id of the div containing the iframe. Should be changed based on the page you're at and the i they gave their player
            events: {
                'onStateChange': onPlayerStateChange//Event listener, fires onPlayerStateChange function whenever the state of the video changes, paused or played 
            }
        });

        function onPlayerStateChange() {
            currentTime = player.playerInfo.currentTime;//Current Time saved
            if (player.playerInfo.playerState === 2) {//If video paused, console.log the time
                console.log(currentTime);
            }
        }
    }
onYouTubeIframeAPIReady();//Initial call to the function

bookmarklet: getting current time of embedded iframe youtube player?

1 Answers