Easy YouTube Player documentation

The Easy YouTube Player is an alternative way of watching YouTube videos. Instead of simulating YouTube we wanted to make sure that everybody who wants to see videos on-line can do so - regardless of age, ability and web proficiency.

Here you'll find information on how to use, host and change the Easy YouTube Player. Please choose what you want to know:

Watching videos

There are several ways to watch a video in the Easy YouTube Player. You can enter a YouTube address, use a bookmarklet or search for a video.

Loading a video

All you have to do to load a video in the Easy YouTube Player is to have a valid YouTube address in the address bar and click the load button (or hit the enter key on your keyboard). The player will then load the video and show it below the address bar. Once the video has been found, you'll see a preview picture of it with a play button in its middle - just like you do on the real YouTube. Figure 1 shows the address bar of the player with the load button.

the location bar of the youtube player

Figure 1: All you need to do to load a video into the player is to enter a YouTube address and hit the "load" button.

Using a bookmarklet

Bookmarklets are small JavaScripts that you can bookmark and add to your links toolbar in MSIE or bookmarks toolbar in Firefox. If you drag the following link on your toolbar or bookmark it, hitting that bookmark on any YouTube page will open up the video in the Easy YouTube Player:

Searching for a video

Searching for a video on YouTube is as easy as entering what you search for in the field on the right and hitting the "go" button (or hit enter on the keyboard). The search results will show up below the search box under the "Search Results / Your Playlist" headline. Figure 2 shows what that may look like for the search term "robot ":

The search panel with a search and results in a list

Figure 2: Searching for a term will show the results below the box in a list.

Playing the video

If you can see a picture of the video, you can start watching it. Once this appears you can hit the play button (the one with a triangle) to play the video. It might be that YouTube needs to load the video a bit more before playing it (this is called buffering). If this happens there'll be a spinning wheel in the middle of the video.

If you want to repeat the last few seconds to see them again or if you missed something you can hit the back button (the one with two triangles).

If you want to pause the video, hit the pause button (the one with two rectangles on it). This is a toggle, so activating it again will resume the video. Hitting the stop button (the one with the big square) will stop the movie. Figure 3 shows all of the play controls:

The play controls of the Easy YouTube player

Figure 3: These controls allow you to change how a video is played. The first one plays the video, the second one repeats the last few seconds, the third one pauses and resumes videos

Changing size

The "Video Size" control allows you to choose a different size of video. There are three sizes available and all you need to do to choose a different one is activate the size you want.

The player will re-size with the video, which means that the search bar might move below the movie if there is not enough space. If that happens, simply choose the normal size again to get the original layout.

The size controls of the Easy YouTube Player

Figure 4: You can select three sizes of video: small, medium and large by pressing the appropriate buttons.

Changing volume

You can change the volume of the video by pressing the appropriate buttons. The one showing a speaker with several sound-waves increases the volume, the one with one soundwave decreases it. The button with the crossed out speaker mutes the player. The mute button is a toggle, so you can press it to mute the video and press it again to unmute it. Figure 5 shows the controls for the volume:

The volume controls of the Easy YouTube Player

Figure 5: These controls change the volume of the video, from left to right: increase Volume, decrease volume and mute.

You can change the volume regardless of the movie playing and any change in volume will decrease or increase the size of the volume bar. If you mute the player, the bar turns grey and when you are already at the maximum value and you try to increase it'll turn red. Figure 6 shows the different states of the volume bar.

Different states of the volume bar

Figure 6: The volume bar has different states. From minimum to maximum volume it is blue, when you try to make it louder whilst being at maximum it turns red and when the player is muted it turns grey.

Preselecting movies and playlists

One of the things we considered of high importance was to enable users to pre-select movies to be automatically loaded when the player is called up. This is why we allow you to play with the URL of the player.

http://icant.co.uk/easy-youtube/

Shows the player without any movie loaded, empty search fields and playlists.

http://www.youtube.com/watch?v=3GjONUZbs6I

Pre-loads the video of this YouTube address and shows the preview image in the player.

http://icant.co.uk/easy-youtube/?search=panda

Performs a search on YouTube for the term panda and shows links to the videos in the playlist on the right. You can use more than one search word by adding them with a "+". For example:

http://icant.co.uk/easy-youtube/?search=red+panda

One last option you have is to bookmark certain videos on del.icio.us and tag them for a user. In order to show these videos as a playlist you need to provide your user name and the tag separated by a dash. For example my user name on del.icio.us is "codepo8" and I bookmarked some videos with the tag "easyyoutubeplayer". The following link will show them all in the playlist:

http://icant.co.uk/easy-youtube/?tag=codepo8-foreasyyoutubeplayer

You can mix and match the different options. If you for example want to show a video and perform a search for other videos you can use:

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=3UgpfSp2t6k&search=accents

Hosting the player yourself

Hosting the player on your own servers is as easy as creating a new folder and unpacking the zip of the player into that one. Notice that you can not run the player on the file system, it needs to be on a server and called via http!

We tried to keep the player as resource-independent as possible - all you need to do if you host the player yourself is to get your own developer key from Google and replace the one in the template with your own:


devkey:'AI39si7dmjt7Gz5bxQDPPdAe2mGPHQvSeFoa1VCM1UGS_DtW-fefNMBeJrl320yAHeAWBycKC4S5NizkuIRiVwgUITUY9fu_cQ',  
devkey:'your-developer-key-from-google',  

Please get your own key as Google might deactivate this one when several IPs use it.

If you are anticipating a lot of traffic, please contact me, as you'd also need to clone the Yahoo! Pipe I am using to search for videos.

Changing the player

One of the main reasons for the full re-write of the player from version 1.5 to 2 was to make it easier for you to change the player. Now all the look and feel of the player is CSS-driven and both the interface and player parameters are in the same template file. This means you'll never have to change the player code itself to customize it for your needs.

Changing the look and feel

All the look and feel of the player is defined in the easyplayerstyle.css file. The player as a whole does not interfere with this look and feel but there are some exceptions:

  • The volume control bar gets a class called "maxed" when the volume is already the maximum and a class called "disabled" when the player is muted.
  • The width of the main player is altered when you zoom the video. This is done programatically in the JavaScript and we have no way around that.

Defining player parameters

You can change the names of these classes and the player parameters in the script section of the template. There you'll find a configuration object that allows you to change everything in the player, heavily documented. Most likely you will never ever have to change that.

Changing the interface and structure

The whole player is driven by a single HTML template template.html and you can change the structure, translate the labels and remove functionality in any way you like. The HTML of the player itself is in between the <!-- start player --> and <!-- end player --> comments.

Notice that any change in the IDs of elements should be reflected in the IDs section of the configuration mentioned earlier, as this is how the player finds these elements.

Another thing that should not be changed are the IDs of any of the buttons as this defines the action of the button (this refers to the zoom control and the player control buttons).

Credits and thank you

All the code, visuals (for what they're worth) and documentation by Christian Heilmann.

A big thank you must go to Antonia Hyde who demanded a player like this in the first place in her talk at the Accessibility2.0 conference in London and helped with initial testing and wording of labels.

Many thanks to Mike Davies and Ben Hawkes-Lewis who gave immediate feedback in the office about the idea and the prototype.

A lot of inspiration came from all the people who commented on the blog about the various iterations of the player, so thank you to all of these people, too.

Last but not least I want to thank everybody involved in the YouTube API, swfObject/UFO, Yahoo Pipes and the del.icio.us API. Without these, this would have never happened.

© Christian Heilmann 2008, licensed using the BSD license.