Thursday, January 20, 2011

Introducing JavaScript Player API for iframe embeds

Update (July 2012): The onYouTubePlayerAPIReady callback has been superseded by  onYouTubeIframeAPIReady and the URL for loading the IFrame Player API code has changed to http(s)://www.youtube.com/iframe_api. The API is now fully supported.

If you have been enjoying our <iframe> embed announced back in July we have some good news for you. Starting today, the <iframe> embed code is the default way to share videos on YouTube.com. We are also introducing an initial beta version of the <iframe> embed JavaScript Player API, making it a viable alternative for developers who previously used the API exposed by the ActionScript players. Let’s look at an example of the API usage:

<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
    //Load player api 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);
    var done = false;
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JW5meKfy3fY',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>
</body>
</html>

This example will play a video for several seconds and then stop playback. An instance of YT.Player is used to control the player, defined by script loaded from http(s)://www.youtube.com/iframe_api.  For more information about the API usage, as always, please consult our Player API documentation and let us know what you think on our Developer Forum.

Cheers,
-Jarek Wilkiewicz, on behalf of the YouTube Player Team