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
- Preselecting movies and playlists (API)
- Hosting the player yourself
- Changing the player
- Credits and thank you
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.
Using a bookmarklet
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 ":
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 "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.
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:
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.
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.
Shows the player without any movie loaded, empty search fields and playlists.
Pre-loads the video of this YouTube address and shows the preview image in the player.
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:
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:
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:
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:
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.
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.