Tags

, , ,

youtube-iframe-api-integrationNow a days all we are totally crazy about watching videos on YouTube. Sometimes we want something to be unique. We place our videos into our website with embedded YouTube videos, which is pretty cool actually. We all handle manually that stuffs. But sometimes we feel like we need some more. If we could control the player with one of our customized Pause/Play option, it would be fun πŸ™‚ If we can Pause/Stop the video while doing other event in the same page, it would be more dynamic too πŸ™‚ But the fact is, these all are available. So now that’s a pretty cool stuff πŸ™‚

So without wasting time, lets start.

YouTube API is one of the most dynamic process to control the embedded YouTube player. There are some different process to do that but as we are very familiar with the iframe embedded YouTube video player. So we will go for the YouTube iframe API integration in this article.

restrictions-youtube-APIBefore doing that we must have to be sure that we are going to use and check the reflection in such a browser which supports HTML5 postMessage feature. But fortunately all the modern browsers support HTML5 postMessage feature currently, except the IE7. Apart from that we also have to make sure that the video frame we are going to use needs to be at least of 200px x 200px to avoid critical player functionality.

So enough restrictions … lets start πŸ™‚

Description :

<!DOCTYPE html> <!-- Just for make sure that the doctype is being provided. -->
<html>
  <body>
    <!-- Here we are gooing to place our iframe embaded youtube video. Remember we don't need to iframe here collected from the YouTube site. Just create the place where we are going to put our video player, that's it. -->
    <div id="video"></div>
    <div id="pause">Pause</div> // A section to integrate customized 'pause' function.
    <div id="play">Play</div> // A section to integrate customized 'play' function.
    <div id="stop">Stop</div> // A section to integrate customized 'stop' function.

    <script>
      var player;
      var playerSatus;

      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api"; // Take the API address.
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Include the API inside the page.

      /**
       * Integration of onYouTubeIframeAPIReady() functtion.
       * - Called while the video is first time loaded.
       * - Also place the iframe embaded youtube video in the div with the id 'video'.
      */
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
        videoId: 'OCWj5xgu5Ng', // Providing the video ID.
        height: '284', // Video height.
        width: '486', // Video width.
        events: {
          'onReady': onPlayerReady, // Initializing the on load function.
          'onStateChange': onPlayerStateChange // Initializing the on change action function.
        }
        });
      }

      /**
       * Integration of onPlayerReady() functtion.
       * - Called while the video is loaded and let the video automatically play.
      */
      function onPlayerReady(event) {
        event.target.playVideo(); // Here we are auto playing the video on loading the page.
      }

      /**
       * Integration of onPlayerReady() functtion.
       * - Called while pause/replay/stop the video.
      */
      function onPlayerStateChange(event){
        playerSatus = event.data;
      }
    </script>
  </body>
</html>

So lets get all the stuffs one by one :
1. First we have to create the div with a specific id( here it’s “video” ) in which the script will create the embedded iframe video player. So we don’t need to create the embedded iframe video player from the YouTube site.
2. onYouTubeIframeAPIReady() : This is the predefined function through which the API will be called while the page is loaded for the first time. We have to call this using the ‘id’ mentioned in the div( here it’s “video” ).

player = new YT.Player('video',

Once the API is being called, it prepares an object with the specific parameters as follow :
“videoId”: Which we got from the youtube video page link. E.g. – http://www.youtube.com/watch?v=NpEaa2P7qZI&#8221;, here ‘NpEaa2P7qZI’ is the video id.
“height”: It’s the video frame height.
“width”: It’s the video frame width.
“events”: It defines the events you would like to call and it has the below methods:

  • onReady: This event calls a function with the functionality( whatever you would like to ) to be implemented. This is being called when the video player is being loaded for the first time.
  • onStateChange: This event is very much familiar to us and which we do very frequently. This is nothing but the pause/play/stop feature. When we pause/play/stop the video by clicking in the video frame this event is being called. So calling a function we can do whatever we want when this event would be called.

Basically we need these two event management in general case.

Now coming to the customized functionality finally.

1. Pause :
– We already have the div( which we can design as a pause button ) with the id “pause”. Now clicking on this we are gonna fire an event to pause the running video with the help of “pauseVideo()” function( predefined in the API ). One more thing to notice that we can easily keep tracking the video whether it’s playing or paused or stopped with the help of a global variable( already defined ) “playerSatus”. While loading the video as “playerSatus = event.data” in the “onPlayerStateChange” function. So lets see how this will going tto work.

/* We are doing the event call using jQuery */
jQuery('#pause').click( function(){
  // Checks for the video is playing or not.
  if (playerSatus == YT.PlayerState.PLAYING) {
    player.pauseVideo(); // 'player' variable we already defined and assigned.
  }
});

2. Play :
– Now for playing the video we will check that the video is stopped and then we use the playVideo() function( predefined in the API ).

jQuery('#play').click( function(){
  // Checks for the video is paused or not.
  if (playerSatus == YT.PlayerState.PAUSED) {
    player.playVideo();
  }
});

3. Stop :
– Now for stopping the video we will check that the video is playing and then we use the stopVideo() function( predefined in the API ).

jQuery('#stop').click( function(){
  // Checks for the video is playing or not.
  if (playerSatus == YT.PlayerState.PLAYING) {
    player.stopVideo();
  }
});

So this all. Hope this will help you all guys. For further help will update in this article gradually.
Till then,
HAPPY KNOWLEDGE SHARING πŸ™‚

Advertisements