Introduction and Screenshots

The YouTube Ad Feature easily allows advertisers to leverage their YouTube hosted videos while continuing to fully track all video events, including play, pause, quartiles and more. Additionally, the YouTube player is fully customizable and supports all YouTube player parameters.

youtube1.jpg    youtube2.jpg


The following table provides links to the template and demo for the YouTube Ad feature.



Preview Demo

Supported Platforms


Supported Version


Internet Explorer 10+, Edge, Firefox, Chrome


Firefox, Chrome, Safari


iOS 9.0 and later


iOS 9.0 and later


Android 4.4 and later ( including tablets)


Workspaces Available

The YouTube Ad Feature includes one HTML5 Workspace built using the HTML5 Polite Banner. 

Included Workspace Files

File Name 



Sizmek Ad Configuration file


Demo Default Backup image


Demo HTML index file


Ad Feature Javascript file


Demo Stylesheet


Ad Feature Video assets


Implementing the Ad Feature

Getting Started

Before you begin, make sure you have the following resources available:

  • YouTube Ad Feature files 
  • Your YouTube Video Id


Add the YouTube Ad Feature to Your Workspace Code

The following steps illustrate how to add the YouTube Ad Feature to your creative Workspace.

  1. Include the YouTube Javascript file in the head of your Workspace index.html file:

    <script type="text/javascript" src="scripts/youtube.js"></script>

  1. Next, add the Sizmek Video Component and Adkit include:
    • Make sure Adkit is loaded after the Video Component
    • Please note: the file path has been shortened for simplification 

    <script type="text/javascript">EBModulesToLoad = ['Video'] </script>
    <script type="text/javascript" src="…/adkit.js"></script>

  1. Then, add the Ad Feature Stylesheet include: 

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

  1. Add an HTML div element to your markup with a unique id
    • This div will be targeted by the creative script to house the YouTube video 

    <div id="youtube-container"></div>

  1. Add and edit the following to the body of your index.html file. Update the parameters within the config object as needed and instantiate the script, passing the config object to your creative script.
    1.  Update the containerId with the div you wish to load the YouTube player
    2. Update the youtubeVideoId with your YouTube Video Id
    3. Update the width and height as needed
    4. Update the youtubePlayerOptions object with YouTube player parameters as needed. You can find a full list of the YouTube parameters at the following link:


        var config = {
containerId: 'youtube-container',
youtubeVideoId: 'V8XYiA6il_8',
width: '260',
height: '160',
youtubePlayerOptions: {
html5: 1,
enablejsapi: 1,
fs: 1,
controls: 1,
showinfo: 0

var youTubeVideo = new youTubeAdFeature(config); </script>
  1. Locate and rename one of the included video files in the videos directory for each YouTube video you wish to load so that the file name matches the YouTube video id.
    • ex: if your YouTube video id is 'n-1G9IqylKs', rename one of the video files in the videos directory to 'n-1G9IqylKs.mp4'
    • note: you need to do this for each YouTube video you wish to include

YouTube Parameters






The unique id of the div you wish to place the YouTube video.



The unique id of your YouTube hosted video. This is the value of the ‘v’ parameter found in the YouTube video URL. EX = v=XXXXXXXXXXX



The desired width of the YouTube video



The desired height of the YouTube video



An object listing any of the existing YouTube player parameters. A full list of parameters can be found here:

YouTube Public Methods

Method Name



Pauses the currently playing YouTube video.


 Plays the currently cued/loaded YouTube video.

seekTo(seconds: Number, allowSeekAhead: Boolean)

Seeks to a specified time in the video.

  • The seconds parameter identifies the time to which the player should advance.

The allowSeekAhead parameter determines whether the player will make a new request to the server if the seconds parameter specifies a time outside of the currently buffered video data.

setSize(width:Number, height:Number)

Sets the size in pixels of the <iframe> that contains the YouTube player.


Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching an additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function.

Setting up the YouTube Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the YouTube Ad Feature workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip the Workspace folder.
  2. Log in to the MDX2.0 platform.
  3. Click ManageCreative Assets, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type list.
  8. Choose the HTML5 Workspace Folder you uploaded to the platform.
  9. Click Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the Workspace folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads. Then, click New Ad and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format list.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save

Known Issues

  • Not supported in Standard Banners
  • Not supported in APP
  • Youtube player Full screen button does not track on clickthrough
  • YouTube icon in the YouTube player does not track on clickthrough.

Change Log 

February 18, 2018

  • Added the ability to support and track multiple YouTube videos
  • Updated to new Feature Template
  • Migrated to SAS  

February 29, 2016

  • Added Ad Feature Tracking
  • Updated to use AdKit 

September 23, 2014

Initial Release


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request