How to create youtube overlay

701

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

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

<script src=”https://www.youtube.com/iframe_api”></script>

<script>
var my_player;

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

}

}

</script>

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