YouTube iframe API lets developers control embedded YouTube video on a website. They can for example stop or pause the player, react on player state changes or add their own event listener. I familiarise with it with a YouTube video that’s in fact compilation of couple of songs and I beside it was an ordered list of those songs and I wanted the currently played song to be styled differently.

The idea came to mind when I saw YouTube videos that have in descriptions time markers for each song indicating it start and when you click it it rewinds player to that time.

Here is this example.

User clicks on a song from this list and player moves to the position of this song and starts to play. And song currently being played is styled with bigger font so the user can spot it easily. User can also click on player timeline and song played will be highlighted. I also didn’t forget the scenario when one song ends and another begins so the appropriate song is marked as currently played.

Things to note:

• Examples from official docs aren’t working because iframe API has changed the way how code runs when iframe API is ready. You need to pass a player initialisation code to YT.ready function, not define onYouTubeIframeAPIReady (I only figured this out by inspecting https://www.youtube.com/iframe_api, which fortunately doesn’t have many lines).
• YouTube video ID is e.g. bHQqvYy5KYo and not v=bHQqvYy5KYom which is what follows after question mark in URL address.
• You can create YouTube video player from scratch from JavaScript or use existing iframe as I did. Consult docs and see the 1st example on how to do it.
• You can get a thumbnail for a YouTube video just by grabbing its ID and depending on desired quality insert it in a URL pattern. All URL patterns are listed in the linked stackoverflow answer (i didn’t use this feature in the demo, but in an app I decided to built later around this iframe api).