Get Storyboard via Youtube iFrame API

by Vladimir Sobolev

HTML

<div id="player"></div>
<img id="storyboard">
<script src="https://www.youtube.com/iframe_api"></script>

CSS

/* DEC 2025 UPDATE */
/* STORYBOARD WAS REMOVED FROM PLAYER META DATA */

JavaScript

var player;

function onPlayerStateChange(event) {
    console.log('Player state change to: ' + event.data);
    if (player.playerInfo.storyboardFormat) {
        story_board_data = decodeURIComponent(player.playerInfo.storyboardFormat).split('|').map(function(el, n){
            return !n ? el : el.split('#');
        });
        player.destroy();
        document.getElementById('storyboard').src = story_board_data[0].replace('L$L/$N','L2/M0')+'&sigh='+story_board_data[3][7];
    }
}
function onPlayerReady(event) {
    console.log('Player ready');
    player.mute();
    player.seekTo(0);
}

function onYouTubeIframeAPIReady() {
    console.log('iFrame API ready');
    player = new YT.Player('player', {
        width: 0, height: 0,
        videoId: '7nN5g0bu7v4',
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange,
        }
    });
}