How to create youtube overlay

213
Share on Facebook
Tweet on Twitter

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

=”1280height=”720id=”ik_player_iframesrc=”https://www.youtube.com/embed/xyxabcd?enablejsapi=1&wmode=opaque&rel=0” frameborder=”0allowfullscreen>

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();
}

}

}

SHARE
Facebook
Twitter
Previous articleBitterguard stuffed fry
Next articleTommato Dal
Alertinfo.in is a online news service