YouTube Player API Reference for iframe Embeds

YouTube Player API Reference for iframe Embeds

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played.


<script>
    // 1. This code loads 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);

    // 2. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
      
    function onPlayerReady(event) {
        event.target.playVideo();
    }      
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
         // setTimeout(stopVideo, 6000);
          //_gaq.push(['_trackEvent', 'Videos', 'Play', 'Sales Video']);
          ga('send', 'event', 'Videos', 'Play', 'Sales Video');
         event.target.playVideo();
         done = true;
        }
        if (event.data == YT.PlayerState.PAUSED) {
            //_gaq.push(['_trackEvent', 'Videos', 'Pause', 'Sales Video']);
            ga('send', 'event', 'Videos', 'Pause', 'Sales Video');
        }
        
        if (event.data == YT.PlayerState.ENDED) {
            //_gaq.push(['_trackEvent', 'Videos', 'Finished', 'Sales Video']);
            ga('send', 'event', 'Videos', 'Finished', 'Sales Video');
        }        
    }
    function pausedVideo() {
        //_gaq.push(['_trackEvent', 'Videos', 'Pause', 'Sales Video']);
        ga('send', 'event', 'Videos', 'Pause', 'Sales Video');
        player.stopVideo();
        $( ".video-play" ).css('display','none');
        $( ".top-head, .containt-ctr, footer, .banner-height" ).css('display','block');
        window.location.reload();    
    }
function open_video(event){
    player = new YT.Player('player', { //player is div id where you place 
          height: '100%',
          width: '100%',
          videoId: 'Z2qdLkHaW88',
          playerVars: { 
            'controls': 0,
            'showinfo': 0,
            'rel' : 0
            },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
    });
}
$( document ).ready(function() {    
        $('body').mouseleave(function() {
                $( ".close-this" ).css('display', 'none');
            }); 
        $('body').mouseover(function() {
            $( ".close-this" ).css('display', 'block');
        }); 
        $( ".close-this" ).on( "click", function() {
            pausedVideo();
        });
    });
<span class="video-icon" onclick="open_video();"></span>

If you want to load video automatically then change the function
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            playerVars: {
                color: 'white',
                playlist: 'taJ60kskkns,FG0fTKAqZ5g'
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

Note: 
1. player.getCurrentTime():- get the current elapsed time of a youtube video
2. Get total duration of the video with getDuration(). 
3. player.playVideo(); play video on click trigger
4. player.pauseVideo(); pause video on event trigger
5. setPlaybackQuality() : Altering the video quality
6. player.setVolume() : set the volume in percentage

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}
Put duration time in duration tab.
$('#duration').text(formatTime( player.getDuration() ));

Progress Bar
Create your own progress bar
$('#progress-bar').on('mouseup touchend', function (e) {

    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});

If we want the progress bar to move automatically as the video progresses. Then call the function onReady event

function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Sound Event: 

if(player.isMuted()){
    player.unMute();
}
else{
    player.mute();
}

Playlists: 
We can play the next or previous video in a playlist.

$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});
player.playVideoAt(index), used to play a specific video from the playlist.

Queue Video Dynamically

var videoId = 'h14wr4pXZFk';
player.cueVideoById(videoId);