An Intro to Youtube API

Streaming video is an incredibly important part of the internet. Integrating this media into your site, whether it be video blogs, music videos, corporate media is extremely simple with Youtube embed codes. This is quick and easy, but what if you want to keep a consistent design aesthetic across your site. Youtube provides a great API to integrate streams into your website, with your own custom player. Here’s how to build a custom video player with the Youtube API.

READ MORE API INTROS: GOOGLE MAPS API TUTORIAL

Let’s Setup the HTML

First include the Youtube API into the HTML file, above any other JavaScript link. For this example, I will be using jQuery and a new JavaScript file called player.js.

<script type=”text/javascript” src=“//www.youtube.com/iframe_api”></script> <script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script> <script type=”text/javascript” src=”player.js”></script>

Then add a container to the HTML file where ever the video is to be placed on the site.

<div class=”container”> <div class=”player-wrapper”> <div id=”youtube-player”></div> <div class=”loading”><img src=”assets/niftit-logo.png” /></div> </div> <div class=”controls”> <button class=”play”>Play</button> <button class=”pause”>Pause</button> </div> </div>

Inside the container, we have:

A player wrapper, to set out the dimensions of the player. A loading element with an image, to spin while loading. A set of controls, in this case, play and pause.

Add Some CSS

The loading element will be positioned absolute over the video player and it’s contained image will be centred. We will spin the image with CSS animations and show it when buffering the video. Add these styles to the site.

.container { width:400px; margin: 0 auto; } .player-wrapper { position: relative; } .loading { left: 150px; position: absolute; top: 100px; -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -ms-animation: spin 1s infinite linear; } @-webkit-keyframes spin { from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} } @-moz-keyframes spin { from{-moz-transform:rotate(0deg);} to{-moz-transform:rotate(360deg);} } @-ms-keyframes spin { from{-ms-transform:rotate(0deg);} to{-ms-transform:rotate(360deg);} }

Then the JavaScript

Now that we have the html and styles in place, we need to initialise the Youtube API and plug everything in. First, in player.js, lets initialise our Youtube player. Start by creating a player variable to reference the player, when the document is ready.

$(document).ready(function(){ var player; }

Next we need to create the player object.

window.onYouTubeIframeAPIReady = function() { player = new YT.Player(‘youtube-player’, { width: 400, height: 300, videoId: ‘Qt1MvdPYD1U’, playerVars: { controls: 0, showinfo: 0 }, events: { ‘onReady’: onPlayerReady, ‘onStateChange’: onPlayerStateChange } }); }

Once the YouTube API has loaded, it will fire the window.onYouTubeIframeAPIReady function in your code. Here is a break down of what’s going on inside this function.

player = new YT.Player(‘youtube-player’, {

We create a new Youtube Player object, assign it to the player variable and pass the id of the element we want the player to load into.

width: 400, height: 300,

The dimensions of the video, these are in pixels.

videoId: ‘Qt1MvdPYD1U’,

If you look at the URL of a Youtube video, you will notice “v=“ then a bunch of letters, numbers and symbols after, much like this:

This code is the video’s id.

playerVars: { controls: 0, showinfo: 0, },

The video player options. We don’t want the youtube controls or the show info panel.

events: { ‘onReady’: onPlayerReady, ‘onStateChange’: onPlayerStateChange }

These are the event callbacks from the API. We need to know when the video is ready to play and also when the state of the video changes. Here, the API will call the corresponding functions that we will write next.

function onPlayerReady(){ player.playVideo(); } function onPlayerStateChange(state){ if (state.data === 1){ $(‘.loading’).hide(); } else if (state.data === 3){ $(‘.loading’).show(); } }

The API onStateChange will return the state of the video into our onPlayerStateChange function. Take a look at the state object for more detail. We just need to know if the player is playing or buffering the video stream in this example.

State 1 = Playing

State 3 = Buffering

If we are buffering here, we show the loading image, if we are playing, we hide it. Even though it is possible to click on the video to play and pause it, that’s not good UX. Let’s hook up our buttons with click listeners to play and pause the video.

$(‘.pause’).click(function(){ player.pauseVideo(); }); $(‘.play’).click(function(){ player.playVideo(); });

That’s it! Your custom player is complete. For more information about the Youtube API, check out the developers guide here.

READ MORE API INTROS: GOOGLE MAPS API TUTORIAL