Recently, I worked on one bug where GTM tracking was breaking for an embedded YouTube video with a custom play button. The video played perfectly fine on the click of the play button, but it was not getting tracked by GTM. I didn’t find anything wrong in the code, so I researched and found that it is recommended to use YouTube IFrame player API for any custom play/pause button whether you are doing GTM tracking on your web pages or not.
The IFrame player API lets you control the YouTube player using JavaScript. Using the API’s JavaScript functions, you can:
- Queue videos for playback
- Play, pause, or mute those videos
- Adjust the player volume
- Retrieve information about the video being played
Steps to Use YouTube IFrame Player API
To use the API, make sure you load the IFrame player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Also, set the enablejsapi parameter to 1 in the src URL of <iframe> tag. Setting the parameter’s value to 1 enables the player to be controlled via IFrame player API.
<iframe id="iframe-id"
src="https://www.youtube.com/embed/<video-id>?enablejsapi=1"
frameborder="0"
></iframe>
onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, enabling you to then use the API on your page.
function onYouTubeIframeAPIReady() {
player = new YT.Player('iframe-id', {
videoId: 'video-id',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
‘iframe-id’ – Value of id attribute of <iframe>
‘video-id’ – YouTube video id
onPlayerReady – The API will call this function when the YouTube player is ready. You can write events for your custom buttons and perform operations on a YouTube player like playing a video, pausing a currently playing video, etc.
Below operations can be performed:
player.playVideo()
player.pauseVideo()
player.stopVideo()
player.seekTo()
onPlayerStateChange – The API will call the onPlayerStateChange function when the player’s state changes, indicating that the player is playing, paused, finished, and so forth. Based on the player’s state, you can perform different operations as needed. For example, you can show a pause button once the player’s state changes to 1, and you can show the play button once the player’s state changes to 2.
Different state values are:
-1 – unstarted
0 – ended
1 – playing
2 – paused
3 – buffering
5 – video cued
If you want to know more about different operations/functions IFrame player API provides, there is detailed documentation.
If you want to see a working example of custom play/pause buttons, click here. The JavaScript script code will take care of multiple embedded YouTube videos. Once you click on the play button, the video will start playing, and its state will change to 1. Once its state changes to 1, which indicates the video is playing, the API will call onPlayerStateChange() function and make a custom pause button visible.
If you open this in a Firefox browser, you will notice the video plays without any problem. But if you open this link in a Chrome browser and click on the play button, the video will play muted. This is due to the auto-play policies for Chrome. You need to mute the video first to auto-play it. For this reason, I added the line yt_player[index].mute(); for Chrome browsers. If you comment on this line, Chrome will not play the video. Refer below link,
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Please don’t forget to drop a comment if you have any questions or need more information on this topic.
