.Creative Agency Implementation Guide. .August 2011.

.YouTube Player Component.

.Build Guide.

Introduction.

Are you already using YouTube for uploading all of your videos to? Are you using it to get greater reach and create

buzz around the next great blockbuster film trailer, using it as a way to get repeat views on any TV spot you’re currently running or just using it as a way to host general videos and advertising related content? Then why not use our YouTube Player Component to pull in that same video into your Rich Media creatives too?

The YouTube Player component also allows you to use either the latest Dark version of the YouTube skin or the Light version so you can choose whichever skin fits in best with the rest of your creative.

.YouTube Video Component.

The YouTube Player Component allows you to pull in a duplicate of the YouTube player complete with all of the

controls you’re used to when viewing any normal YouTube video, such as annotations, full screen and quality setting controls. Alternatively if you want to create your own custom graphic controls you can do this too, by using the complete YouTube Player API you’re able to just pull in the video itself and only include the controls you want, position them wherever you want them and have them look exactly how you’d like them to.

Our YouTube Player Component also allows all of the DoubleClick Rich Media tracking metrics you’re used to with

normal Rich Media video creatives to carry on being recorded, so full tracking is available for the number of video views, plays, pauses, volume interactions and even the number of views which reached 25,50,75 and 100% of the video, as well as all of your standard Rich Media metrics. If that wasn’t enough though by using the component, any user initiated view of your video within your creative will also cause the video view count of your video within YouTube to be recorded. So allowing for your Rich Media creative to really help drive the potential viral side of your campaign.

.IMPORTANT:. YouTube video views will ONLY count if a user interacts with the default YouTube play button

which appears in the middle of the creative or the play button on the default control menu in the bottom left corner of the player. Autoplay videos will not count.

.IMPORTANT:. If custom video controls are used, the YouTube video view count will NEVER be affected and will

not increase for any video view within the creative, irrespective of whether it's user initiated or not.

.AS3 Only.YouTube officially deprecated their AS2 YouTube API and as such although it may still work, the AS2 version of the

API is no longer supported by either YouTube or DoubleClick. However below you’ll find full documentation on how to use our AS3 YouTube Player Component, including information on the full AS3 API.

The YouTube Component can be used within any of our Rich Media AS3 formats, and this guide outlines the

process of just using the component. for more information on building AS3 Rich Media creatives within DoubleClick Studio please check out our help centre .here. .NOTE:. If you have any questions please contact .dclk-drmtechnical@google.com.

.Using the Component.

1.. Download the YouTube Component .here.

2.. Once downloaded install the component by double-clicking the mxp you downloaded and then

pressing accept within the Extension Manager window which should open..NOTE:. Alternatively if you open flash and go to the Help Menu you can select Manage Extensions from the dropdown list, then navigate to the mxp you downloaded and select it to install it.

3.. Open Flash & start a new AS3 project.

4.. Open your components window and from within the DoubleClick Innovation AS3 menu just drag and

drop the YouTube Player component from your components window to your stage.

5.. Resize and position the component to wherever you want the creative to appear within your creative.

6.. Copy and paste the following actionscript code snippet into your actionscript layer, this will allow the

fullscreen functionality to work but also allow for all of the Rich Media tracking metrics to fire correctly.

import com.google.ads.studio.innovation.youtube.player.YTPlayerEvent;import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer; //Enable fullscreenSecurity.allowDomain("www.youtube.com");Security.allowDomain("s.ytimg.com");Security.allowDomain("*"); ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_PLAY, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.PLAYER_READY, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_COMPLETE, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_0_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_25_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_50_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_75_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_100_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_25_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_50_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_75_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_100_PERCENT, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_PAUSE, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_REPLAY, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_MUTE, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_UNMUTE, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_FULLSCREEN, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_EXIT_FULLSCREEN, eventHandler);ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_QUALITY_CHANGE, eventHandler); function eventHandler(event:Object):void {

switch (event.type) {case YTPlayerEvent.PLAYER_READY :

break;case YTPlayerEvent.VIDEO_PLAY :

enabler.counter("YTVideo Click to Play");break;

case YTPlayerEvent.VIDEO_COMPLETE :enabler.counter("YTVideo Complete");

break;

case YTPlayerEvent.VIDEO_0_PERCENT :enabler.counter("YTVideo Percent 0");break;

case YTPlayerEvent.VIDEO_25_PERCENT :enabler.counter("YTVideo Percent 25");

break;case YTPlayerEvent.VIDEO_50_PERCENT :

enabler.counter("YTVideo Percent 50");break;

case YTPlayerEvent.VIDEO_75_PERCENT :enabler.counter("YTVideo Percent 75");break;

case YTPlayerEvent.VIDEO_100_PERCENT :enabler.counter("YTVideo Percent 100");break;

case YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT :enabler.counter("YTVideo Autoplay Percent 0");break;

case YTPlayerEvent.AUTOPLAY_VIDEO_25_PERCENT :enabler.counter("YTVideo Autoplay Percent 25");break;

case YTPlayerEvent.AUTOPLAY_VIDEO_50_PERCENT :enabler.counter("YTVideo Autoplay Percent 50");break;

case YTPlayerEvent.AUTOPLAY_VIDEO_75_PERCENT :enabler.counter("YTVideo Autoplay Percent 75");break;

case YTPlayerEvent.AUTOPLAY_VIDEO_100_PERCENT :enabler.counter("YTVideo Autoplay Percent 100");break;

case YTPlayerEvent.VIDEO_PAUSE :enabler.counter("YTVideo Pause");break;

case YTPlayerEvent.VIDEO_REPLAY :enabler.counter("YTVideo Replay");break;

case YTPlayerEvent.VIDEO_MUTE :enabler.counter("YTVideo Mute");break;

case YTPlayerEvent.VIDEO_UNMUTE :enabler.counter("YTVideo Unmute");break;

case YTPlayerEvent.VIDEO_FULLSCREEN :enabler.counter("YTVideo Fullscreen Entered");break;

case YTPlayerEvent.VIDEO_EXIT_FULLSCREEN :break;

case YTPlayerEvent.VIDEO_QUALITY_CHANGE :enabler.counter("YTVideo Quality Change");break;

.NOTE:. A Sample file using this component can be found .here..NOTE:. The Case statements can be used to fire off custom events and actions so feel free to edit the functions if you want your creative to perform specific actions when the video finishes, is paused, has sound turned on etc

7.. Select the component you added to the stage and give it an Instance Name of ytp by opening up the

Properties window and adding it into the Instance name field.

8.. With the properties window still open go to the Component Parameters and find the videoId

Property. Then enter in your YouTube Video ID of the video you want to appear within your creative.

.NOTE:. The YouTube video ID can be found by going to your video within YouTube, for example here .http://www.youtube.com/watch?v=HwylTXMSftE. At the end of the URL you’ll find a unique 11 character code which always follows v= this is your unique YouTube Video ID for your video and so using the above use case you would enter HwylTXMSftE into the videoIdComponent Parameter property.

9.. On publish of your FLA you should then see your YouTube Video pulled into your creative. For

additional information on the rest of the Component Parameters check the Component Parameters section below.

.Component Parameters.

All of these settings can be altered via the component parameters within the properties window for the YouTube

Player component. However these can also all be called via the API so Example API Usage for each setting is also detailed below. >. autoCrop:Boolean - Crops the black bars which may be displayed within the video during playback.Example API usage:

ytp.autoCrop = true; .NOTE:. This is NOT supported in version 0 - enabling the option with version 0 will cause the Flash IDE to crash when attempting to compile..NOTE:. When used with version 1 there is an issue with the thumbnail image being stretched when the player is not set to auto play. >. autoHideControls:Boolean - Hides the video control bar but reappears when the user hovers over the video player.Example API usage:

ytp.autoHideControls = true;

>. autoPlayType:String - Set the video to automatically play with or without sound or alternatively have the video require the user to click it in order for it play

none = no auto play, when a user clicks to play it triggers a youtube view count.preview = muted auto play with a button overlay that triggers a youtube view count on user interaction.standard = unmuted auto play without a button overlay and doesn’t trigger a youtube view count.

Example API Usage: //valid values "none" "preview" "standard"ytp.autoPlayType = "preview";

.NOTE:. Version 1 DOES NOT support the standard unmuted auto play option.

>. hdOnFullscreen:Boolean - Enabling this option will set the video playback quality to 720p, if this video quality is available, when the user enters fullscreen mode.Example API Usage:

ytp.hdOnFullscreen = true;

>. playerType:String - There are currently two versions of the player. Embedded and Chromeless. The Embedded player is the YouTube video player appearing as you see it on YouTube complete with video controls, and the Chromeless player is the YouTube video player appearing without any video controls, so giving you the option of creating your own video controls.Example API Usage:

//valid values "embedded" "chromeless"ytp.playerType = "embedded";

.NOTE:. Version 1 DOES NOT support the chomeless player.

>. previewDuration:Number (seconds) - When the autoPlayType setting is set to "preview", this is the duration the video will play for. Example API Usage:

ytp.previewDuration = 18;

.NOTE:. For Version 1 of the player ONLY 30 is valid for now. >. showInfo:Boolean - Displays the video title and upload information when the user hovers over the videoExample API Usage:

ytp.showInfo = false;

.NOTE:. Version 1 DOES NOT support this setting. >. suggestedQuality:String - The playback quality of the video.Example API Usage:

//valid values "default" "small" "medium" "large" "hd720"ytp.suggestedQuality = "hd720";

>. theme:String - The skin theme of the playerExample API Usage:

//valid values "light" "dark"ytp.theme = "dark";

>. version:uint - The YouTube Player Component supports two versions. Version 0 will load an older tried and tested solution, and the default version 1 will load the new solutionExample API Usage:

//valid values 0 1ytp.version = 0;

.NOTE:. Please be aware that we currently recommend using version 0 as version 1 does have a few bugs, although we’re quickly fixing these we can’t promise any bugs you find will be fixed before your creative is due live.

>. videoId:String - The YouTube video ID.Example API Usage:

ytp.videoId = "HwylTXMSftE";

.YouTube Player Component:.

.API Properties & Methods.

In addition to the Component Parameters there are a number of other API methods which can be called and used within your actionscript. These are all detailed below. >. clickToContinueText:String - The text displayed to the user when the video reaches the preview duration limit. The default text for this is Click to Continue.Example API Usage:

ytp.clickToContinueText = "Click to watch the full video";

.NOTE:. Version 1 DOES NOT support this setting. >. clickForSoundText:String - The text displayed to the user during the preview playback. The default text for this is Click for Sound.Example API Usage:

ytp.clickForSoundText = "Click to play with sound";

.NOTE:. Version 1 DOES NOT support this setting. >. color:String - The color of the progress barExample API Usage:

//valid values:"red" "white"ytp.color = "white";

>. customThumbUrl:String - Displays a specified image as the thumbnail icon for the video, instead of the default image chosen when the video was uploaded to YouTube.Example API Usage:

//valid value is either a filename or a full URL ytp.customThumbUrl = enabler.getFilename("myImage.jpg");

.NOTE:. Version 0 DOES NOT support this setting. >. destroy():void - This function destroys the YouTube Player instance. Example API Usage:

ytp.destroy();

.NOTE:. You should always call ytp.destroy() to unload a YouTube player. This function will close the NetStream object and stop additional videos from downloading after the player has been unloaded. If your code contains additional references to the player SWF, you also need to destroy those references separately when you unload the player.

.YouTube Player Component:.

.Other API Methods.

By accessing the proxy component directly there are also a number of functions available which can be used to

control the YouTube player via actionscript. these are all outlined below. >. pause():void - Pauses the currently playing video.Example API Usage:

ytp.proxy.pause();

>. play():void- Plays the currently cued or loaded video.Example API Usage:

ytp.proxy.play();

.NOTE:. Reminder - YouTube only counts playbacks that are initiated through a native play button in either the embedded or chromeless player. >. replay():void - Replays the current video.Example API Usage:

ytp.proxy.replay();

>. mute():void - Mutes the currently playing video.Example API Usage:

ytp.proxy.mute();

>. unMute():void - Unmutes the currently playing video.Example API Usage:

ytp.proxy.unMute();

>. cueVideoById(videoId:String):void - Loads the specified video's thumbnail and prepares the player to play the video. The player does not load the actual video until after play() is called.Example API Usage:

ytp.proxy.cueVideoById("HwylTXMSftE");

.NOTE:. Version 1 has issues with tracking events not firing correctly after using this method. >. loadVideoById(videoId:String):void - Loads and plays the specified video.Example API Usage:

ytp.proxy.loadVideoById("HwylTXMSftE");

.NOTE:. Version 1 has issues with tracking events not firing correctly after using this method.

>. loadVideo():void - Will load a video based on properties which have already been set. So if you need to switch videos after the initial one has started playing, you can simply change the properties and call this method instead of creating a brand new instance of the player.Example API Usage:

ytp.proxy.loadVideo(); .NOTE:. This is ONLY supported in version 1.

The YouTube Player component also has 3 static methods which can be called at any time, this includes even without having to create or initialise the YouTube Player object. Because of this the functions should be called via using YTPlayer instead of the proxy. These methods and an example of how to use and call them are as follows. >. pauseAllVideos():void - Pauses all currently playing videos. >. muteAllVideos():void - Mutes all currently playing videos. >. destroyAllVideos():void - Destroys all currently playing videos.Example API Usage:

import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;function exitClicked(e:MouseEvent) {

YTPlayer.pauseAllVideos();}

my_btn.addEventListener(MouseEvent.CLICK, exitClicked); .NOTE:. This component will automatically pause all videos on any exit click so the use of these functions will be limited.

It’s possible that you may require multiple YT videos in your creative and that you want to make sure that when these videos play that they also cause the actual YT watch page video views to increase too. If this is the case then it’s likely that you’ll want to use the getClickToPlayButton api method. By using this method, rather than requiring a user to click your creative twice, once to cue/load the video into the player and then again by having them press the YT Video play button you can cut this down to just one click.By using the getClicktoPlayButton you can pull in a YT video’s custom thumbnail icon which will then act as both your video selection and play button all in one, when you click the thumbnail the video will load and start playing immediately, and add a view to the relevant YT video’s view counter.An example of how this can be done can be found below:

// For tracking when a user has clicked the video thumbnailfunction videoClick(e:MouseEvent) {

enabler.counter("Video 1 clicked");} function eventHandler(event:Object):void {

switch (event.type) {case YTPlayerEvent.PLAYER_READY :

var ytObject:Object = ytp.proxy.player;var button:DisplayObject = ytObject.getClickToPlayButton(“YOUR VIDEO ID”);button.addEventListener(MouseEvent.CLICK, videoClick);button.width = 50;button.height = 25;button.x = 238;button.y = 222;stage.addChild(button);break;

…

.NOTE:. This must be implemented within the YTPlayerEvent.PLAYER_READY event inside the eventHandler function.

.YouTube Player Component:.

.Not Using the Component.

So what happens if you don’t want to use the drag and drop component but instead want to create everything via actionscript and external actionscript files? Well.... that's absolutely possible as well!

Example API Usage:import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;var ytp:YTPlayer = new YTPlayer();addChild(ytp);ytp.width = 320;ytp.height = 180ytp.version = 0; ytp.proxy.videoId = "7BOhDaJH0m4";ytp.proxy.autoPlayType = "preview";ytp.proxy.autoHideControls = true;

.NOTE:. All of the previous functions, methods and uses of the API can also be used in conjunction with this.

An example FLA of this can also be found .here.

.Utilising the YouTube AS3 API.

The DoubleClick YouTube Player Component is built using the YouTube API and as such all of the standard

YouTube Player API functions can also be used with our component.

The full YT AS3 API can be found .here. however the way of contacting the YouTube player is slightly different

To call any of these functions you need use one of the following two methods depending on the playerType of your player, these methods are as follows. >. player:Object - If you are using the autoPlayType of none or standard then the original youtube embed player object is available. In this instance YouTube AS3 API functions could be referenced as follows. Example API Usage:

ytp.proxy.player.getVolume();

>. autoPlayer:Object - If you are using the autoPlayType of preview then preview youtube embed player object is available. In this instance YouTube AS3 API functions could be referenced as follows. Example API Usage:

ytp.proxy.autoPlayer.stopVideo();

.NOTE:. Version 1 DOES NOT support this.

.Resources.

>. YouTube Player Component >. Example FLAs using the Component Drag & Drop Method >. Example FLA using the API Method >. AS3 YouTube API Documentation >. DoubleClick Rich Media Help Centre >. DoubleClick Rich Media Studio >. DoubleClick Rich Media Gallery >. @rmgallery - DoubleClick Rich Media Gallery Twitter Account

Contact. Us.If you still have any questions relating to this format or build then please feel free to contact our Rich Media

Technical Support team at dclk-drmtechnical@google.com.

About. DoubleClick.For advertisers and publishers who need to reach a target audience, the Google’s DoubleClick™ product suite is

an advertising platform that maximizes revenue growth and return on advertising spend through a unique and innovative ad targeting process. The experience and innovative spirit at DoubleClick drives a constant evolution of products and solutions, ensuring the best, most effective advertising tools are always at our customers’ command.

www.doubleclick.com. www.richmediagallery.com.

.DoubleClick UK : Belgrave House, 76 Buckingham Palace Road, London SW1W 9TQ : Phone: +44 (0)800 912 1344..www.doubleclick.co.uk ©2011 Google Inc. All rights reserved..