Hey guys,
In this tutorial, we will discuss how to load YouTube video with help of YouTube JavaScript API. YouTube provides us a simple JavaScript API to load particular YouTube API. All we need one div and section, YouTube JavaScript API library and some JavaScript functions. But If you want to control some YouTube video operations like play the video with html button, pause the video with html button, stop the video, mute or unmute etc. Then you need to use some YouTube JavaScript API library functions. First we need to create one player object with help onYouTubeIframeAPIReady function, before that we need to load //www.youtube.com/iframe_api/ youtube iframe api. onYouTubeIframeAPIReady function will create player object with YT.Player class.
function onYouTubeIframeAPIReady() {
$youtube_player_height = $height = (jQuery(window).height())*60/100;
player = new YT.Player('youtube_player', {
height: $height+'px',
width: '100%',
videoId: $video_id,
playerVars: { 'autoplay': 1, 'controls': 1 ,'version': 3, 'showinfo': 0,'wmode': "opaque"},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Live Demo
If you look the above code I provided some meta information like height of player, width, video id(you need to pass the id of video what you want to play), some player variables and event functions like onPlayerReady : this event function will be called when the player ready. onPlayerStateChange: this event function will be called when state of player will be changed like play, pause or End.
When you load index page, one video also loads automatically because of one default attribute data-play-video, if you like to load other video then add data-play-video=’1’ to video button
<button type='button' class="play-video btn-primary" id="LEx6K4P4GJc" video_id="LEx6K4P4GJc" video_name="This computer will grow your food" video_author="TheQA Guru" video_time="00:15:55" data-play-video='1'>Play Video</button>
If you add data-play-video=’1’ more than one video button then it will load first one.
Here are some variables which will be use in functions
var player; this variable will be used as global object of player.
var tag = document.createElement(‘script’); To create script tag by javacript.
tag.src = “//www.youtube.com/iframe_api/”; source of js iframe api
var pre_video = “”; This variable will be used to check user clicked on same video id or different.
var current_obj; To create current button object so we can perform several operations with same meta values.
$video_id = “”; Set video id to this variable and use in several functions.
Now here are some more functions to pause the video, mute the video or unmute the video, load other video by click on play button.
- Play the video by the click play button
jQuery(".video_metadata").on("click",".play-video",function(){
if(jQuery(".pause-video").length>0){
jQuery(".pause-video").html("Play Video").removeClass("pause-video").addClass("play-video");
}
jQuery(".mute-button").addClass("disabled");
$video_id = jQuery(this).attr("video_id");
$youtube_link = "https://www.youtube.com/embed/"+$video_id+"?autoplay=1&controls=1&version=3&showinfo=0&wmode=opaque&enablejsapi=1&";
$parent = jQuery(this).parent();
$current_video_meta = "";
$play_button = "";
if(pre_video==$video_id){
player.playVideo();
}else{
if(player === undefined){
$count = 0;
pre_video=$video_id;
$playerstr = "<div id='player_container'></div><div id='video_meta'></div>";
$video_title = jQuery(this).attr("video_name");
$video_author = jQuery(this).attr("video_author");
$video_time = jQuery(this).attr("video_time");
$tmpvideo_id = jQuery(this).attr("video_id");
jQuery("#video_content").html($playerstr);
jQuery("#video_content").find("#player_container").append(jQuery("#youtube_player"));
jQuery("#video_meta").html($current_video_meta);
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}else{
player.destroy();
onYouTubeIframeAPIReady();
}
}
current_obj = this;
change_player_status("play");
return false;
});
- Pause the video:
jQuery(".video_metadata").on("click",".pause-video",function(){
player.pauseVideo();
pre_video = $video_id;
change_player_status("pause");
return false;
});
- Mute the video
jQuery(".video_metadata").on("click",".mute-button",function(){
if(player.isMuted()){
player.unMute();
jQuery(this).text('Mute');
}
else{
player.mute();
jQuery(this).text('Unmute');
}
})
- Player state change function
function onPlayerStateChange(event) {
if(event.data==YT.PlayerState.PLAYING){
change_player_status("play");
jQuery(current_obj).siblings(".mute-button").removeClass("disabled");
}
if(event.data==YT.PlayerState.PAUSED || event.data==YT.PlayerState.ENDED){
if(event.data==YT.PlayerState.PAUSED){
change_player_status("pause");
}
if(event.data==YT.PlayerState.ENDED){
change_player_status("end");
}
}
}
- Common function which will be called whenever player state will change
function change_player_status($player_status){
if($player_status=="play"){
jQuery(current_obj).html("Pause Video");
jQuery(current_obj).removeClass("play-video").addClass("pause-video");
}else if($player_status=="pause" || $player_status=="end"){
jQuery(current_obj).html("Play Video");
jQuery(current_obj).removeClass("pause-video").addClass("play-video");
}
}
This function will be called when user pause / play the video by player controls or play / pause by html button.
