Controlling Youtube Videos with the Javascript API

21 February

Controlling Youtube Videos with the Javascript API

Google offers a powerful API for developers wishing to integrate Youtube videos with their applications. Despite the usefulness of these functions, exploring Google's documentation leaves you feeling like you've wasted hours wading through a sea of information, only to find that there wasn't a single practical example for you to use. So, here is a good example of the Youtube API without all of the fluff:

  1. The first thing you'll need is a Youtube. For our purposes we'll be using http://www.youtube.com/watch?v=BV2aIRzaJZ4. Once you find the video you'd like to embed, hit the embed button just underneath the Youtube video and copy the given code. For maximum compatibility, we will check the "Use old embed object" box to get a regular <object> to embed, like so:
    
    
  2. Now, you need to insert additional instructions in your embed code to allow javascript to communicate with the Youtube Player:
    
    
  3. Now all you need is a function that is called whenever the player is ready:
    function onYouTubePlayerReady(playerId)
     {
       var myplayer = document.getElementById(playerID);
     }
  4. Finally, you can use the different methods provided by Google to stop, start, play, pause, and do a number of other things to your video. For example, myplayer.stopVideo() will stop your video, while myplayer.playVideo(); will start it again.

Hopefully this introduction to the Youtube API can help you to avoid the endless searching through Google's instructions, and let you get down to writing some creative applications!

&lt;object width="480" height="390"&gt;
&lt;param name="movie" value="http://www.youtube.com/v/BV2aIRzaJZ4?fs=1&amp;amp;hl=en_US"&gt;&lt;/param&gt;
&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;
&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;
&lt;embed src="http://www.youtube.com/v/BV2aIRzaJZ4?fs=1&amp;amp;hl=en_US" type="application/x-shockwave-flash"
              allowscriptaccess="always" allowfullscreen="true" width="480" height="390"&gt;&lt;/embed&gt;

TAGS: Web Development, Social Media, General

Share this post!