Creating youtube overlay is very simple Please very below steps for creating youtube overlay.
1)We hae to take youtube url with embed key like below
https://www.youtube.com/embed/XnZmoF94jbk
2)we have to enable youtube api like below. if u want to enable we have to pass the parameter ‘enablejsapi=1’ verify below url for more clarity.
https://www.youtube.com/embed/XnZmoF94jbk?enablejsapi=1
3)up to now we enabled youtube api then we have to handling the youtube actions.
4)we have to include script tag like below. using below we can use youtube functions.
my_player.addEventListener(“onReady”, “onYouTubePlayerReady”);
my_player.addEventListener(“onStateChange”, “onYouTubePlayerStateChange”);
Finally code like below
=”1280” height=”720” id=”ik_player_iframe” src=”https://www.youtube.com/embed/xyxabcd?enablejsapi=1&wmode=opaque&rel=0” frameborder=”0” allowfullscreen>
function onYouTubeIframeAPIReady() {
my_player= new YT.Player(‘ik_player_iframe’);
console.log(‘Video API is loaded’);
//subscribe to events
my_player.addEventListener(“onReady”, “onYouTubePlayerReady”);
my_player.addEventListener(“onStateChange”, “onYouTubePlayerStateChange”);
}
function onYouTubePlayerReady() {
console.log(‘Video is ready to play’);
}
function onYouTubePlayerStateChange(event) {
if(event.target.getPlaylist()==null){
if(event.data==0){
showFrontLayer();}
}else{
var count = event.target.getPlaylist().length;
var c_count = event.target.getPlaylistIndex()+1;
if(count==c_count && event.data==0){
showFrontLayer();
}
}
}