YouTube Chromeless Player with Google Analytics Event Tracking

You probably know that you can implement YouTube videos on your own web site, but do you know that you can make your own YouTube player?

Why on earth should I make my own YouTube video player, perhaps you think. It's mainly three reasons for that:

  1. You can decide the look and functionality of the video player.
  2. You can track how your visitors interact with your videos through your web analytics.
  3. It's easy to play embedded YouTube Videos in high quality.

Why did I make this player?

A while ago Justin Cutroni wrote an article called Tracking YouTube Videos with Google Analytics. To be able to track your visitor's interaction with your YouTube videos with web analytics, you have to use the YouTube Chromeless Player. Since web analytics, and Google Analytics in particular, is one of my interests, I started to look for YouTube Chromeless Players that were easy to style and implement. I didn't find any, so I made my own player with Google Analytics Event Tracking based on Justin's work. Later I added the possibility to play videos in high quality. You can download the player later in this blog post.

In this article I will mainly explain how to implement this player, but I will also slightly touch web analytics for online video.

Since I'm from Norway and I probably will get some foreign visitors to this article, I have chosen to use the opportunity and show a video from the great Norwegian artist Marit Larsen as a demo (if you want a geek video about the YouTube Chromeless Player instead, it's at the end of this blog post). The song in this video is titled "If a Song Could Get Me You", and I am playing the high quality version.

How to implement the YouTube Chromeless Player

First, download the zip-file (66Kb), and unzip the files into for example a folder called youtube. The zip-file contains the following files and folders:

What Comment
index.html Demo start page for the player. You don't need this file to implement the player into your blog posts or articles.
youtube Folder that contains all the files.
youtube.js Javascript-file that contains all the javascript code for the Chromeless Player and Google Analytics Event Tracking. You have to change some values in this file.
You will have to change your Google Analytics UA code (UA-XXXXX-X) with your Google Analytics account number in this file to be able to track videos.
swfobject.js SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.
slider.js Javascript-file with functions for the volume slider.
player.css CSS-file that controls the layout of the player. You may need to change some values in this file.
default.asp If you are running an ASP-site, this is your video player file. You have to change the Google Analytics UA code in this file, and perhaps width and height of the YouTube image.
index.php If you are running a PHP-site, this is your video player file. You have to change the Google Analytics UA code in this file, and perhaps width and height of the YouTube image.
images Folder where you find all the images for the video player, like the "start image", play button, pause button etc.
extra Folder that contains the "Start image" in Adobe Photoshop format.

The player is implemented in articles using an iframe. I prefer to style everything with CSS, and width and height of the iframe is therefor controlled by CSS. Add the CSS below to your main stylesheet (a stylesheet that controls the layout of your website).

  1. .ytIframe {
  2. height: 422px;
  3. width: 466px;
  4. border: 0;
  5. }

When this is done, you should be able to start using the YouTube Chromeless Player.

How to implement the YouTube player into your articles

As I mentioned above, the player is implemented into articles using an iframe. In the example code below, I assume that you have unzipped everything into a folder called youtube. Then, post the iframe code below into your article

<iframe frameborder="0" scrolling="no" class="ytIframe"
src="/youtube/?VideoID=YouTubeVideoID&VideoTitle=Video Title
&Quality=High">
</iframe>

  1. VideoID - This is the ID of the YouTube video, and is used to identify which video to play, and to grab the YouTube preview image. YouTube preview images are made in three different sizes. We are grabbing the largest image called 0.jpg. This image can be found at this adress:
    http://img.youtube.com/vi/VideoID/0.jpg
    The widht of the image is originally 320 pixels, so you will probably have to stretch width and height of the image in your "player file" (default.asp or index.php).
  2. VideoTitle - You decide which title to use. The VideoTitle is used to identify the video in Google Analytics.
  3. Quality - Optional. For playing videos in high quality, add the parameter Quality=High.

Playing video in high quality

The possibility to play embedded YouTube Videos in high quality isn't an option normally. To get around this, you have to add a hack to the embedding code. I have made this a little bit easier. If the video is available in high quality, just add the parameter Quality=High (only add this parameter if the video is available in high quality), and the high quality version will be played.

Are you making videos yourself, and are wondering how to make the best quality for YouTube, check out Hi-Res YouTube Hacks from O'Reilly.

You can also see some more videos in high quality in an Norwegian YouTube blog post I wrote earlier.

Customizing of the YouTube Chromeless Player

I have tried to make everything so easy as possible, but unfortunately you will have to edit some code in several files if you are going to customize the player.

Customizing size of the YouTube player

If you want to change width and height of the player:

  1. Change width and height of the CSS class .ytIframe.
  2. Change width and height of the image we are grabbing from YouTube in the player file (default.asp or index.php).
  3. Change width and height of the player in youtube.js. Look for this code at the beginning of the file:
    'ytapiplayer', '463', '365', '8', null, null, params, atts);

    463 is the width and 365 is the height.
  4. Change width or height of the following ID's in player.css.
    1. #ytimage - Change width and height
    2. #ytimage span - Change width and height
    3. #timebar - Change width
  5. Open up videoPlayLarge.psd (Photoshop Image) found in the folder named extra. Change size to a size approximately 2px smaller than .ytIframe. Save the image with transparent background, and replace videoPlayLarge.gif found in the folder named images.
  6. Clear your browsers' cache, and test your player. NB! It is important that you test the player in Firefox 3.0.x (at least). If the iframe is to small for the content within it, the player may not work in Firefox 3.0.x. If everything works fine, you are now done.

Changing the look of the player requires some knowledge about CSS, and can be done by editing player.css. If you want to add more functions to the player, you will have to do some javascript programming based on the YouTube Javascript API.

About the volume slider

Making a working volume slider (slider.js) is what caused me most trouble. After banging my head against the wall, and testing of many different javascript sliders, I was able to make it work using Arantius Lightweight Javascript Control. I have slightly rewritten this javascript to be able to create the volume slider.

You will also find some references within youtube.js to slider.js, since the slider must "speak" to the player.

Tracking YouTube videos in Google Analytics

The YouTube video is tracked in Google Analytics using something called Event Tracking. To get a better grip of tracking events with the YouTube Chromeless Player, check Justin Cutroni's terrific article that I mentioned earlier.

What data should we track from videos?

Dennis R. Mortensen, Director of Data Insights at Yahoo, wrote in his blog post, Online Video Analytics - KPIs, that there are 9 Essential Online Video Metrics we should measure. Since this player isn't loading any advertisement, we are left with 7 metrics. They are:

  1. Online video started
  2. Online video core content started
  3. Online video positive consumption action
  4. Online video negative consumption action
  5. Online video ended
  6. Online video played, percentage of total
  7. Online video played, second

With background in the metrics above, the following events are tracked in the player:

  1. Video Player Loaded
  2. Video - Started
  3. Video - Play
  4. Video - Forward
  5. Video - Rewind
  6. Video - Pause
  7. Video - Stop (Time event in seconds is tracked when the Stop button is clicked)
  8. Video - Stop Left Page (Time event in seconds is tracked when the visitor leaves the page)
  9. Video - Ended (Time event in seconds is tracked when the video is finished playing)

Muting, unmuting and changing volume isn't tracked in my example since I don't consider this as important information. However, if you think tracking of muting and unmuting is important, the example is made ready for tracking of this. Just uncomment the tracking code found in youtube.js.

Some final words

I promised you a geek video as well. Below you find a YouTube Player APIs and Tools Tutorial video.

If you look around on my site you have probably noticed that everything else is written in Norwegian. I normally don't blog in English, but I have been asked if I could write an article in English that explains my player, which is the reason for this blog post. Since this blog normally is in Norwegian, and I haven't had time to implement a multilingual blog system, you find some explanations of how to comment below:

Click "Legg til kommentar" below. Than fill out your name (Navn), e-mail (Epost) and your website (Ditt nettsted) if you have a website. HTML formatting doesn't work in my comment field, use BBCode formatting instead. You can drag the comment field around if you want to. If you want to preview what you have written, click on "Forhåndsvis". When you are done and want to save your comment, click on "Lagre". If you haven't had any comments approved on this blog before, I will have to approve your comment manually.

If you make any improvements to the player I would love to hear about it, especially if you make an improvement to the Forwarding or Rewinding solution. This should have been a slider solution, but since I'm not really a programmer, I haven't been able to make that yet.

If you like the player, I hope you spread the word and vote for this blog post. And just in case you missed the link to the download:
Download my YouTube Chromeless Player Example (zip)
.

Happy playing!

Update 14th of March 2010

The player has been updated with a bug fix and a improvement to the Google Analytics Event Tracking.

Tracking time when somebody leaves the page or closes the browser window
Video - Stop Left Page is added to the player/Google Analytics Event Tracking. Earlier if a visitor just left the page or closed the browser windo, the time would be recorded as 0 seconds no matter how long the video had been playing. Using ununload and unbeforeunload the time is now tracked. The time will only be tracked if the video is either playing, buffering or is paused. This is done by checking getPlayerState.

If you are using a previous version and want to upgrade, look for the function leave() in the new youtube.js, and update the <body> tag in default.asp or index.php to this:
<body onload="embedPlayer();" onbeforeunload="leave();" onunload="leave();">

Google Analytics Asynchronous Tracking
The player is using the new Google Analytics Asynchronous Tracking. All the Google Analytics codes are placed inside youtube.js. You will have to change the Google Analytics UA-code (UA-XXXXX-X) with your account number.

Tracking embedded YouTube videos without using Chromeless Player

There exist also a solution for tracking embedded YouTube videos without using the Chromeless Player made by Direct Performance.

Du kan følge kommentarer til denne posten med RSS. Du må ha javascript aktivert for å kunne kommentere. Tilbaketråkk er deaktivert.

Tags : , , ,

  • Comments are closed
Nice in theory, but it came off as completely useless (FF3, Mac OS X 10.5.4). The video playback was so choppy, it was close to unwatchable. And the pause button didn't really work (10 seconds after I pressed it, the video spontaneously restarted though).

The video seemed to have ample buffer for playback, and I don't normally have problems viewing high quality Youtube videos.
Thanks for your feedback Håvard. I have tested the solution in IE6, IE7, IE8 Beta, Opera, Google Chrome and Firefox 3.0.1 on different computers, but not on Mac.

I have sometimes also experienced buffering problems with the high quality videos, and this potential problem is also mentioned in the O'Reilly Hi-Res YouTube Hacks (linked to earlier in this article).

Note that the hi-res videos take longer to load and are more prone to stalling during playback.

—David Battino
I have however never experienced this as so problematic as you describe it. I would appreciate if someone else with Mac and Firefox also could give me feedback on this, and perhaps test the videos over at O'Reilly also. One of the videos is embedded as "normal" YouTube video, except from the Hi-Res Hack.
Sorry for sounding a bit harsh. I'm looking at it now in Chrome on Windows XP and the player works pretty sweet indeed. :) I know the Mac Flash Player has some issues from time to time, it could be that you stumbled upon some of them.
No problem at all.

Since we are talking about Firefox. When I started to make this player I wasn't able to make it work in Firefox 3.0.1, so I wrote that in an earlier Norwegian blog post. Later I got corrected, it was Firefox on that particular pc that had the problem. A fresh reinstall solved the problem (and some other problems).

I also know that an add-on for Firefox called Flashblock can cause problems.
  • Jay
  • 10/13/2008 3:57:24 PM
Could I get this same player to work for google video? or would it take too much coding?

Regards, Jay
Hi Jay

According to my knowledge you can't.

Anyway, the player is built upon the YouTube API, and I don't think there exist an API for Google Video:

http://code.google.com/more/
A small bug fix is made, pluss tracking of time played if a visitor leaves the video/page.

If a visitor didn't finish watching the video, or didn't press Stop, time played wouldn't be recorded in the previous version. This is now fixed, and will be tracked as
Video - Stop Left Page.

Happy playing!
Thanks for the great work. Found a couple of bugs:

* The included index.php obviously hasn't been tested (fair enough) - for anybody having troubles: it still contains a few ASP tags where there should be PHP, it lacks a number of closing brackets, and you need an explicit "print" after each occurrence "<?php"

* I find that pressing "stop", whilst it does bring back the "play" button overlay, doesn't actually stop the video! I haven't found a way to fix this, so I just added a call to "pauseVideo" before stopping

* At the moment, sadly, you can only have one video per page. I'm working on turning it into a proper object-oriented approach so that you can have one javascript object per video
Thank you for your useful feedback Andy.

As you correctly writes, index.php hasn't been tested.

Do you have a working PHP version that you can share? That will be appreciated.

And please keep me/us posted when you have a proper object-oriented apporach working.
  • Chris
  • 5/7/2009 6:28:21 PM
Forgive me as I'm new to developing (JS, PHP, etc). So this might be a VERY stupid question.

I am getting this error:
"<a href="javascript:startNewVideo('
Fatal error: Call to undefined function htmlencode() Line 42"

Line 42 in my code is this:
<div id="ytimage"><a href="javascript:startNewVideo('<?php Server.HTMLEncode(Request.QueryString("VideoID")) ?>', 0);"><span></span>
<img src="http://img.youtube.com/vi/<?php Server.HTMLEncode(Request.QueryString("VideoID")) ?>/0.jpg" alt =" <?php Server.HTMLEncode(Request.QueryString("VideoTitle"))?> " width="463" height="347" /></a>
</div>

I noticed a couple of things that I don't understand:
1.) the function "startNewVideo()" is defined as taking no parameters. Yet here it is being called and given TWO parameters:
a.) '<?php Server.HTMLEncode(Request.QueryString("VideoID")) ?>'
b.) 0

Is that valid Javascript? Can a function that is defined as accepting no parameters be CALLED with parameter?

2.) Is "Server.HTMLEncode()" even PHP? I looked up that phrase on Google and it appears to be ASP

Again, I'm sure this is a very stupid question - but its completely holding me up none-the-less.
Hi Chris

Your question is not stupid, the PHP file contained (or do perhaps contains errors, I'm not a PHP programmer).

Server.HTMLEncode is not PHP, my fault. I think the correct code should be <?php htmlspecialchars($_GET['VideoID'])?> etc. Any PHP programmers, please correct me if I'm wrong.

Regarding the function "startNewVideo()" it should transfer the videoID parameter. I am however not the person behind that part of the code, here is the original code:
http://sandbox.epikone.us/ytanalytics/index2.txt
  • Chris
  • 5/8/2009 12:02:26 AM
Thanks Eivind - that did it. It works now. I don't understand WHY it works...but that's a fight for another day.
  • Chris
  • 6/7/2009 12:35:35 AM
Okay, so I finally had the balls to remove the regular youtube player from my site and put your chromeless player implementation in (had it up on test site).

The trouble is that it's not logging any events in GA.

According to Google's website, the "createEventTracker()" function has been deprecated, but that doesn't mean that it shouldn't work, right?

The video plays fine and everything looks good to the end user (which is great) but it's not tracking any events (which defeats purpose).

Any ideas on where to start troubleshooting this? I appreciate your help.
Hi Chris

Since I haven't seen your test site, it's impossible to know why it doesn't work. I assume you have replaced the UA account number in the example with your own?

You are right that the createEventTracker() has been deprecated, but it works splendid on my site.

To debug I would use Firefox and Live HTTP Headers extension. Then you don't have to wait for your data to show up in Google Analytics, you can see it right away if data are being sent to Google Analytics.

As an example, below is some of the data logged by Live HTTP Headers when I clicked on pause on the Marit Larsen video.

http://www.google-analytics.com/__utm.gif?utmwv=4.3&utmn=2140778241&utmhn=www.savio.no&utmt=event&utme=5(YouTube%20Video%20Player*Video%20-%20Pause* Marit%20Larsen%20-%20If%20a%20Song%20Could%20Get%20Me%20You)

Hope this helps a little bit.
  • Chris
  • 6/7/2009 9:53:05 AM
Nope. Sure didn't. Wow that's embarrassingFlau

Thanks for all your help. I'm seeing the same stuff in HTTP headers now. Thanks again.
  • wwwcoder
  • 8/22/2009 12:55:08 AM
Great example. I implemented a right side playlist using the YouTube API, I have it set up so when I click on the video in the nav it loads it in the video player via an Ajax call. What I would like it to do is autoplay. Is there any way I can get the video to autoplay on load?
Hi, and sorry for my delayed answer.

Yes you should be able to make the video autoplay on load, but I haven't done it my self.

The easiest method (but not a pretty one) is to add
startNewVideo('videoID', 0); to your body onload code. But at least that should get you started.

Hope it was to some help.
The player has been updated. New functions:
  1. Google Analytics Asynchronous Tracking. The player is now using Google Analytics Asynchronous Tracking
  2. Improved time tracking. The end time is tracked also if the browser is closed and a movie is either playing, paused or buffering.

Hei.

Fint eksempel Bredt smil

Kan du fortelle hvor du har hentet PHP-delen fra, siden det ikke virker? Det er ASP du bruker på din egen side?

Vennlig hilsen
Stine
Dette nettstedet benytter gammel ASP ja. PHP-delen er ikke hentet fra noen plasser, det var et halvveis forsøk for lenge siden på å knote sammen noe PHP uten å kunne kode PHP.

Om noen har laget (eller kan lage) en PHP-versjon setter jeg pris på det.
See also my article about Video Analytics using Google Analytics API and Excel.

To make the video analytics data tracked with this player more understandable I have made an Excel 2007 spreadsheet that is connected directly to Google Analytics using the Google Analytics API.
  • Maria
  • 4/14/2010 9:41:27 PM
Hi,
I found this demo and it looks perfect for my project however I can't seem to get it to work. I installed all the files as you specified but for some reason the iframe is empty. I would really appreciate your guidance?

XClick to move the comment field