Youtube API video player with some options

Needed a video player that could disappear after the video finished. So after some Google’ing and Stackoverflow research, I went with Youtube API.

<!– Where the Video is placed –>
<div id=”VideoHolder”>
<div id=”player2″></div>
</div>

<!– JS Code in the footer –>
<!– Start Video –>
<script src=”http://www.youtube.com/player_api”></script>
<script>
        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player(‘player2’, {
              height: ‘390’,
              width: ‘640’,
              videoId: ‘947u7Mp-ZFA’, // the video ID in the URL from Youtube
              events: { // Register Events you want to use
                ‘onReady’: onPlayerReady,
                ‘onStateChange’: onPlayerStateChange

              },
              playerVars: {rel: 0}
            });
        }

    //What the events will do.
        function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.PLAYING) {
       event.target.setPlaybackQuality(‘hd720’);  // <– WORKS! Set video quality 
   }
}
        // autoplay video and set volume
        function onPlayerReady(event) {
            event.target.playVideo(); //Auto play
            player.setVolume(100); // Video volume at 100%
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) { // Some custom things happen when the video stops
                $( “#VideoHolder” ).addClass(‘fadeOut’);

                $(‘#container’).addClass(‘fadeIn’);
    //             $( “#VideoHolder” ).fadeOut( “fast”, function() {
//     // Animation complete.
// });
            } 
        }
    </script>
<!– End Video –>

Leave a Reply

Your email address will not be published. Required fields are marked *