PRODUCT
Follow

Overview

The Video Expandable is the first HTML5 format in a series of custom formats that were designed and developed to be served across programmatic channels for both desktop and tablet environments. By controlling different customizable options, this format displays a video that works seamlessly across collapsed and the expanded states, while programmatic customizations take this format to another level. Programmatic formats automatically adapt to a publisher’s page so that a one tag solution can be served across different publisher networks and exhibit completely different behaviors.

When the ad is configured to behave differently based on the domain, certain variables will be overridden from the platform settings, and will be set specifically for that domain/path. This functionality can be enabled or disabled using custom variables. The values of these domain-specific variables are controllable through an administration tool. Access to this tool is restricted to internal Sizmek use. This allows for certified behavior to be used from domain to domain on the same tag by customizing these variables.

The following limitations exist when this ad serves in a tablet environment. These changes are due to hardware limitations of the devices:

  • No auto-play or looping of video available. Video will always be click-to-play
  • Ad will always behave as tap-to-expand regardless of expansion type setting (or programmatic settings for that domain). 
  • When viewing the ad on an iPad (not an issue on Android), the audio button will not be present, and audio will only be able to be controlled by the hardware volume button on the side of the device

 

For more information on Programmatic formats in general, and how to preview the different certified settings, please see Programmatic Support for Custom Formats. Please note that as this format was the first format to have any programmatic support, some of the information in that documentation is superseded by information in this documentation (e.g., the name of the custom variable to enable or disable programmatic support for this format is NOT mdProgEnable, but rather is mdIsDomainConfigEnabled, and setting that var to TRUE will load the programmatic settings, whereas setting it to true will load the settings from the MDX platform; also, CSS and JS injections are limited to on ad load only).


[The below screenshots show the same ad, within two different pages, exhibiting different behavior, in this case by automatically changing the expanding direction accordingly with the in page banner’s position]

VE_auto.jpg

Usability and Ease of Creation are Key Concepts.

No programming skills are required to develop a new Video Expandable ad. Simply plug in different creative content (i.e. images, video) into the template ad, customize different behavioral variables on the platform and a single placement with a different look and feel can be up and running across different publisher pages wherever the format has been certified using the domain specific features with the Programmatic Settings Tool

With a unique ad and simply customizing the default setting variables/creative assets, it is possible to create different format sizes with different behaviors.

The Video Expandable allows the ad developer to easily update both video and image creatives within the banner. The following examples show how the format uses ad configuration variables to control the toolbar position, video position, and both the video controller and the progress bar color. The below screenshots take you through different possible layouts including Vertical, Billboard, Horizontal and Square formats.

 

Vertical Layout

Placing a video in a vertical layout always seems to be a challenge, but not with the Video Expandable.

In the first example, the configuration is set to TOP_BOTTOM_FULLVIDEO. The “_FULLVIDEO” portion places the video in the collapsed state as a full screen video, maintaining aspect ratio, making the height of the video the same as the height of the collapsed state, and overflowing (and clipping) the video to the left and right. The “TOP_BOTTOM” portion of the configuration means that the video will have either the social toolbar or the expand button above it with the other one below it. The position of the video in the collapsed state can be controlled with the group of variables within the ad Default Settings so that the video X and Y positions can be easily adjusted. Note, that only the X offset would work in this example, as adjusting the Y offset would make the _FULLVIDEO portion of the configuration not make sense.

VE_FullVideo.jpg

In the second example, the configuration uses BOTTOM, and places the video in the center of the collapsed state. Both the video size and the video position are completely customized through the Ad Default Setting group of variables. A bottom configuration implies that both the social toolbar and the expand button will be below the video. Within the collapsed and unclipped/expanded states, a companion image works as a background of the creatives. The position of the video in the expanded state is controlled by the Ad Exp. Setting group of variables and these variables control both the video X and Y positions and sizes in this panel.

VE_BOTTOM.jpg

Billboards and Horizontal Layouts

The Video Expandable can be easily adapted to horizontal formats such as billboards or leaderboards. Both the full video configurations and the “Maintain Aspect Ratio” function allow the user to easily optimize the video position within the ad.

In the below screenshot, you can see how the Video Expandable can be customized to resemble a billboard format. This particular banner is set to 970x250 with the social toolbar and expansion button on the top (using TOP Configuration) with a strip of the video that extends to the full width of the banner. The expanding panel contains both the video and the “expand” companion. The video size has been calculated, in the unclipped area, with the mdExpVideoRatio variable activated, which allows the format to automatically maintain the video aspect ratio at the largest size possible without clipping/cropping any portion of the video.

top.jpg

The next set up has a TOP_BOTTOM configuration, with a “default” companion and the video on the right side of the panel in the collapsed state. In the expanding state, using the mdExpVideoRatio functionality, which can be activated with a custom variable, the video size has the same dimension of the unclipped area.

top_bottom.jpg

With a few easy steps, the ad developer can use the Video Expandable to create leaderboards with expandable video.

Through the Ad Configuration variables and with the capability to automatically calculate the position and size of the video, the user can easily adapt their creatives to fit a traditional 728x90 leaderboard that is generally served at the top of the page. This is one of the more engaging and popular formats served within Programmatic Channels.

bottom_728x90.jpg

Square Layouts

All of these customizable features mentioned above will make you love applying an Video Expandable during the production workflow of square formats.

The following screenshots will show you how to take advantage of the Video Expandable in serving the most video engaging creatives within the square formats.
bottom_fullvideo.jpg

In the second example the Video Expandable is running always with a full video configuration, but in the expanded state it is using an “expand” companion as background of the video. Both the position and the size of the video in the expanding panel are automatically calculated within the ad.

top_bottom_fullvideo.jpg

The third example shows how it is easy to work with complete creativity within the Video Expandable.
For any non-full-video configuration, the ad developer can have multiple ways to place the video and the companion images.

bottom_300x250.jpg

In summary, the Video Expandable auto-plays video within a banner, but may expand in size via rollover, click, or tap to show the video in an expanded state. The banner and expanded state may also include a companion image so that additional advertising may run alongside the video. A social toolbar with hooks into social media such as Facebook, Twitter, YouTube, etc. is easy to set up and customize.

Overview Summary

The goals of the Video Expandable, as with any other programmatic custom format, include:

  • Making the format absolutely scalable across different publisher sites
  • Allowing both full and self-service clients to easily customize and set up their ads
  • Supporting rich impressions not only on computer display ads, but also tablets
  • Simplifying the certification process
  • Tracking and grouping these ads as formats within our ad platform
  • Creating a more robust ad preview solution

Demos/Downloads

The following table provides links to the template and demo for the Video Expandable format.

Template

VideoExpandable_2.1.0.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Microsoft Edge, Firefox, Chrome

Mac

Safari, Firefox, Chrome

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android Phone

Android 6.0 and later

Android Tablet

Android 6.0 and later


Note:
Supported in Mobile browsers only and not in Apps.

 

Features

These are the key features of the Video Expandable format by each template.

 

 

Mobile Experience (FullViewport)

yes

Scroll Detection

yes

Domain Configuration via Domain Config Tool (f/k/a Programmatic)

yes

Ad Builder Templates Available

no

Local Preview

yes

Uses AdKit (able to include DCO and Additional Assets)

yes

Polite Loading

yes

Safeframe Support

yes

MRAID (in-app Support)

no

Secure Serving

yes

Sizmek Advertising Suite Support

yes

Implementing a Video Expandable Format

Workspaces

Workspace

Default Images Dimensions

VideoExpandable_2.1.0

300x250 (by default), 160x600,300x600,728x90,970x66

 

Custom Variables: Customizing the Format

The entire customization of the Video Expandable can be adjusted with one of five groupings of custom variables. These groups include:

  • Configuration Settings
    Settings for video positioning/size, social toolbar and expansion button as well as color attributes
  • Collapsed Settings
    Collapsed state settings for the banner
  • Expanded Settings
    Expanded state settings (e.g. expansion size, expanded video size)
  • Programmatic Override Settings
    Customizations to override preset (programmatic) domain values
  • Domain Path Settings
    path to setting files used [not to be edited]



The screenshot below is the customization of the ad with the example values in the column “Example Values to build a 300x250 expandable AD”.

300x250.jpg

Configuration Settings

The first group of custom variables that should be set up and they are related to the configuration of both the default and the expanding state of the AD.
The rows with the same color contain variables which are related to each other.
In order to know how each configuration places the elements, please look at “Configuration Setting Type Values”.

Configuration Setting Type Values

For all configurations, the below is true:

if mdCollapseToolbarFullWidth = true
the social toolbar has the same width of the collapsed state width and it is not placed as an overlay on the video, unless the video is explicitly positioned beneath the toolbar

 

if mdCollapseToolbarFullWidth = false
the social toolbar is always placed as an overlay on the video and the toolbar is only as wide as the video


Wherever the Social Toolbar is located in the collapsed state, it will also be located in the expanded state (TOP or BOTTOM)

 

Adding the “_FULLVIDEO” option will only affect the size/position of the video. The social toolbar and expand button will be located the same as if the FULLVIDEO option were not turned on. FULLVIDEO option fills the collapsed state with the video element, overflowing in one direction and fully-expanding in the other direction. This is dynamically calculated depending on the aspect ratio of your collapsed state. When FULLVIDEO is being used, video size variables for the collapsed state are ignored. Video position will also only work in the direction in which the video is overflowing.

 

The expand button is always centered in the collapsed state

 

Collapsed Settings

The next group of custom variables that should be set up and they are related to the collapsed or the default state of the ad.
The rows in the table below with the same color contain variables which are related to each other.

 

 

 

Expanded Settings

It is the third group of custom variables that should be set up and they are related to the unclipped or expanded state of the AD.
The rows with the same color contain variables which are related to each other and the values in the 5th column are example values to build a 300x250 Video Expandable with companion images.

 

Programmatic Override Settings

This fourth group of custom variables should be set up if the ad developer needs to override a publisher’s certified behavior. All custom variables in this section will be set dynamically from the Programmatic Settings Tool on ad-load based on the domain/page on which the ad is loaded, unless mdIsDomainConfigEnabled is set to true, in which case the values set on the platform will be used.
This group of custom variables is useful to create a custom ad that should have also the same behavior for every website in the campaign, despite (and overriding) the domain detection feature.
In addition, it can be very useful if some placement in the campaign is served to a very large network or DSP, for which a unique behavior for all websites is requested.

 

 

 

Domain Path Settings

This variable should neither be deleted nor overwritten. It contains the path to the domain settings, which are absolutely necessary to run the ad in the programmatic environment.

Custom Variable Values for Templates

The below table shows what variables should be changed from their default values for the different-sized templates. Obviously you can modify any custom variables to suit your needs, but these will give you good-looking starting points for each template. 300x250 column lists the default value, which is the correct value for a 300x250 ad.

Here are more examples with suggested custom variable values in different ad sizes.

 

Provided Workspace Templates

There are 2 provided workspace templates. Though you can customize this format to have the collapsed and expanded states be whatever size you want, there are 2 different samples provided to get you started. Using these templates, along with the above table of custom variable changes required, you can achieve different sizes and experiences.

300x250

300x250_expanded.jpg

300x600

300x600_expanded.jpg

 

Additional Creative Assets

The creative customization of the Video Expandable requires the ad developer to produce only the default image and the additional assets, without asking the ad developer to have any programming skills.

  • Backup Image or Default Image
    jpg, png, gif, or svg file;
    file size: any size needed;
    max weight: up to 99 kb.
    The dimensions of this file are the dimensions of the collapsed state of the ad.
  • Video File – additional asset ID 1
    file format: MP4;
    recommended file bitrate: 800 / 1000 kbps;
    file size: any size needed;
    max weight: as specified in the media plan.
  • Video Poster Image – additional asset ID 2
    jpg, png, gif, or svg file;
    file size: any size needed;
    max weight: up to 150 kb.
  • Default Companion – additional asset ID 3
    jpg, png, gif, or svg file;
    file size: any size needed;
    max weight: up to 150 kb.
  • Expand Companion– additional asset ID 4
    jpg, png, gif, or svg file;
    file size: any size needed;
    max weight: up to 150 kb.
  • Loading Image– additional asset ID 5
    jpg, png, gif, or svg file;
    file size: any size needed;
    max weight: up to 99 kb.
  • Logo Positive Image – additional asset ID 6
    jpg, png, gif, or svg file;
    file size: any size needed;
    35 pixels tall;
    max weight: up to 99 kb.
  • Logo Negative Image – additional asset ID 7
    jpg, png, gif, or svg file;
    file size: any size needed;
    35 pixels tall;
    max weight: up to 99 kb.
  • Landscape Image for Mobile devices - additional asset ID 8
    jpg, png, gif, or svg file;
    file size recommended: 960x640;
    max weight: up to 150 kb.
  • Portrait Image for Mobile devices - additional asset ID 9
    jpg, png, gif, or svg file;
    file size recommended: 640x960;
    max weight: up to 150 kb.

 

Social toolbar setting

The Video Expandable allows the ad developer to easily manage social features through the social toolbar setting.
It can be handled in the Smart Versioning Item List, adding only the URL value for landing or sharing functionality.

  

Clickthrough URLs setting

The Video Expandable allows the ad developer or the media agency to easily handle the external links setting, also managing multiple landing page URLs, through the custom interactions.

 

Manifest Configuration (config.js file)

We have outlined some information about this file below, but for a more detailed description, please see the article in the Sizmek Help Center by going here.

The Manifest Configuration File (config.js location in the root folder of the workspace) is a metadata file that defines certain default behaviors for the ad when created on the Sizmek Advertising Suite platform (MDX does not support the manifest file; the file is simply ignored).  When you create a new blank ad, and select a workspace containing a manifest file, the information in that manifest file will be applied.  You may certainly make changes to the inputted information once the data is there.  The manifest file only gets applied once, when you assign a workspace.

 

Testing in Local Preview

You can test the Ad preview in your Local machine and it´s not necessary to upload the Ad to the Platform. If You edit the file "script/localPreview.js" You will see all the custom variables that the Video Expandable has, you have all the information for each element in the "customJSVars" section, you can modify the values and see the new behavior of the format.

If you want to see the SmartVersioning elements (the social networks buttons) in the same file you will find in the section "svKVPairs" all the SV elements, instead of "none" you only need to add some URL.

The default size for the banner in this format is 300x250 but you can change it for your local testing. Go to "panels\expand\scripts\script.js" and when you edit the file you will find all the elements you can modify:

  • collapsedWidth: the width of the banner (default: 300)
  • collapsedHeight: the height of the banner (default: 250)

The variables below are another elements (images, video, etc) that you can modify for local preview, all of these files should be in the "AdditionalAssets" folder:

  • video_mp4_localPath: the name of your video element (default: video.mp4)
  • video_poster_localPath: the name of your poster element (default: sizmek_poster.png)
  • imageName_default_localPath: the default image (default: companion_300x250_default.jpg)
  • imageName_expand_localPath: the image when the panel is expanded (default: companion_300x250_expand.jpg)
  • imageName_loading_localPath: the image when the panel is loading (default: companion_300x250_loading.jpg)
  • imageName_logo_positive: the logo for positive option (default: logo_positive.svg)
  • imageName_logo_negative: the logo for negative option (default: logo_negative.svg)
  • imageName_mobile_landscape_localPath: the image for Landscape mode (default: mobile_landscape_960x640.jpg)
  • imageName_mobile_portrait_localPath: the image for Portrait mode (default: mobile_portrait_640x960.jpg)

 

Note: These variables will be ONLY used for Local Testing purpose, when you upload the Ad to the platform you will need to apply the setup that you used in Local Preview to the Custom Variables and select the assets correctly in Additional assets.

If your platform is SAS you can modify the file "config.js" with the new configuration before upload the workspace and automatically the setup will be loaded in your new Ad.

 

 

Setting up Video Expandable in the Sizmek Platform

Before you begin, please make sure that you have the workspace available:

  1. Download the template and unzip it for editing. The template files include Sizmek-branded assets. Make sure your default image and your additional assets are replaced so your ad is branded properly.
  2. Archive the workspace into a new ZIP file when you done with your editing, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program. Store workspace zip at where you can access later on when create your ad.

Sizmek MDX2.0 Setup

    1. Log into Sizmek MDX 2.0 Platform
    2. Select Manage -> Ads
    3. Select New -> Create New Ad
    4. Enter a name for your format, and select Video Expandable as the Ad Format (listed under the sub-section Custom Ad Formats)
    5. Once the New Ad screen appears, select your Workspace. If you have not yet uploaded your workspace, you can do so from the “Select Workspace Folder” popup.
    6. After selecting your workspace, you must select a default image. The dimension of the default image is what defines the size of your banner/collapsed state of the ad. The Default Image can be found in the /images folder of the workspace.
    7. Select “Add Panel” and select the expand.html file located in the /panels/expand folder of the workspace.
    8. Name the panel “expand” (if you change this name, the ad will not expand properly unless you also change the code in the ad where the expansion takes place). You may leave the dimensions set to 0x0, and you can also ignore the settings for Auto Retract When, Position Type, and X and Y offsets. All of these settings are completely ignored by the ad, and instead the proper values are calculated by the ad itself.
    9. You can leave “Show Single Panel At A Time” checked, since this format only has a single panel it will not really matter
    10. Do NOT check “Auto Expand Default Panel when Ad is Loaded.” Auto expansion behavior from the platform is completely ignored. Instead, auto expansion is handled by the custom variables.
    11. Give your ad a default clickthrough (and make sure to UNCHECK the “Close Ad Parts When Clicked” in the “Clickthrough URL Settings” area
    12. Save Ad (Ad need to be saved at this point in order to proceed to the next step).
    13. Select Advanced Features and UNCHECK the “Enable Dynamic Expansion Direction – Ad Level” (the ad handles this itself using custom variables).
    14. Select Smart Versioning and start setting social toolbar icons (See Social Toolbar Setting setup above). Two social icons will be pre-set using Sizmek URLs. You must remove these and set up the toolbar as you desire. Keep in mind that you can only include as many icons as you have physical space for in your collapsed and expanded states. If you include too many social icons, the display of the ad will not be correct as the toolbar will attempt to wrap the icons to display them all, leading to a poor experience. The same is true for showing/hiding the advertiser logo. Only display the logo if you have enough horizontal space in your ad.
    15. Select Interactions & Ad URLs -> Custom Interactions and set your additional clickthroughs to your desired landing pages. Be sure to REMOVE the “Close Ad Parts” checkbox from each clickthrough.
    16. Assuming you are creating a 300x250, your ad should now be working correctly and you can preview your ad. If you are creating a different sized banner, or you want to adjust / customize your ad further, Select Advanced Features > variables and start setting your configuration up (See Custom Variables section above for details). Commonly set variables for the different template sizes can be found in the custom variable table above.
    17. Save Ad again, now you can preview the ad from Platform preview.

Sizmek SAS Setup

  1. Log into Sizmek SAS Platform
  2. Select CREATIVE-> ADS
  3. Select New Ad -> Blank Ad
  4. Enter a name for your format, and select Video Expandable as the Ad Format
  5. Once the New Ad screen appears, assign your Default Image and Workspace Folder by click on Assign Asset button from "MAIN ASSETS" tab under "CREATIVE ASSETS" area. The Default Image can be found in the /images folder of the workspace.
  6. If you have not yet uploaded your workspace, you can do so from the “Upload” tab on popup.
  7. Switch to "PANELS" tab and click on Add Panel to add panel.
  8. Enter "expand" in PANEL NAME (if you decide to use different panel name, please remember to change the code in ad where the expansion takes place) and then click on the empty cell next to the panel name you have entered (underneath ASSET), you will see "Please Select" dropdown appeared, click "Please Select" dropdown to bring the list of available asset and then select "panels/expand/expand.html". You can ignore SIZE, X, Y, WIDTH and HEIGHT as they will be ignored by format.

  9. Switch to "ADDITIONAL ASSETS" tab and add additional assets by click "Add Asset" button. It is very important that you have asset and asset id exactly matched as we described in Additional Creative Assets section above because we display different asset based on its asset id.You can find all the additional assets in AdditionalAssets folder from the root of workspace.
  10. For the ADVANCED PANEL SETTINGS, please leave as it is or as the image show below. Do NOT use auto expand setting here as auto expansion is handled by the custom variables.
  11. Enter Click-through URL under the "CLICK-THROUGH & EVENTS” area, adjust Target Window, Show Address Bar, and Show Menu Bar as your desire.
  12. Under "CUSTOM INTERACTIONS" area, click "ALL" tab and set your additional clickthroughs to your desired landing pages in REDIRECT URL fields. Be sure to UNCHECK the "CLOSE AD PARTS" checkbox from each clickthrough.
  13. Assuming you are creating a 300x250, your ad should now be working correctly and you can preview your ad. If you are creating a different sized banner, or you want to adjust / customize your ad further, Go to "ADVANCED FEATURES" in "GENERAL" tab under "SETTINGS" area and start setting your configuration up (See Custom Variables section above for details). Commonly set variables for the different template sizes can be found in the custom variable table above.
  14. Switch to "AD DELIVERY" tab and make sure "Enable the Dynamic Expansion Direction" is unchecked.
  15. Save Ad (Ad need to be saved at this point in order to proceed to the next step).
  16. After page refreshed from saved ad, click on "VERSIONS" and you will see a default version that come with the template. Click on the default version to edit or New Version button to create more versions.

    Untitled-32.jpg

  17. Under DYNAMIC ELEMENTS, you will find social toolbar icons settings (See Social Toolbar Setting setup above). Two social icons will be pre-set using Sizmek URLs. You must remove these and set up the toolbar as you desire. Keep in mind that you can only include as many icons as you have physical space for in your collapsed and expanded states. If you include too many social icons, the display of the ad will not be correct as the toolbar will attempt to wrap the icons to display them all, leading to a poor experience. The same is true for showing/hiding the advertiser logo. Only display the logo if you have enough horizontal space in your ad.

    Untitled-33.jpg

  18. Save the Ad again, now you can preview the ad from Platform preview.

 

Custom Script Notice: Since Video Expandable format is a HTML5 Custom Format, there is no need to attach a custom script since the appropriate one will be pulled in automatically.  For reference, the following custom script is being used:

PL_VideoExpandable.js

Note: The above custom script may be served either securely or insecurely based on the option selected in the platform

 

Technical information

Ad Interaction Tracking

Video Expandable provides the following custom interaction tracking by default.

      • CLICK_TO_EXPAND
      • MOUSE_OVER_TO_EXPAND
      • TAP_TO_EXPAND
      • CLICK_TO_CLOSE
      • MOUSE_OUT_TO_CLOSE
      • pua_Facebook_LANDING
      • pua_Twitter_LANDING
      • pua_Twitter_SHARE
      • pua_Youtube_LANDING
      • pua_Linkedin_LANDING
      • pua_Linkedin_SHARE
      • pua_Pinterest_LANDING
      • pua_Pinterest_SHARE
      • pua_Instagram_LANDING
      • pua_Email_SHARE

 

Ad Video Metrics

Video Expandable provides the following metrics for the video.

      • start video
      • video played 25%
      • video played 50%
      • video played 75%
      • video fully played
      • mute video
      • un-mute video

 

All Custom Variables

Custom Variable Name

Type

Description

Default Value

mdCollapseShowShadow Boolean If true, the collapsed state decreases in height by 7 pixels, and displays a 7-pixel-tall CSS drop shadow beneath that state. True
mdCollapseSwitchElements Boolean

If false, order is Social Toolbar on top, Expand Button on bottom.

If true, order is Expand Button on top, Social Toolbar on bottom.

False
mdCollapseToolbarFullWidth Boolean If true, toolbar will be full width of collapsed ad state. If false, toolbar will be width of video in collapsed state. True
mdCollapseVideoDimHeight Integer The height of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video. 0
mdCollapseVideoDimWidth Integer The width of the video when ad is in the collapsed state. This value is ignored if you are either using a FULLVIDEO configuration, or if you have the mdCollapseVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video. 0
mdCollapseVideoPositionX String The horizontal position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full width and overflowing on height. 0
mdCollapseVideoPositionY String The vertical position of the video when the format is in the collapsed state. When using FULLVIDEO or mdCollapseVideoRatio configurations, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state. When using FULLVIDEO, this variable will be ignored if the video is stretched full height and overflowing on width.. 0
mdCollapseVideoRatio Boolean If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video. If using a FULLVIDEO configuration, this variable is ignored. When this variable is set to true, mdCollapseVideoDimHeight and mdCollapseVideoDimWidth are ignored. True
mdConfiguration String The social toolbar position, the video position (and size), and the expand button position, in both the expanding and the default positions. TOP_BOTTOM
mdConfigurationBgColor String The color of the background or if you will use the image of the panel expanded "image" image
mdConfigurationControllerColor String The color of the video controllers. #FFFFFF
mdConfigurationEnableLogo Boolean If true, the logo of the branded version of the format is added as the first element of the social toolbar. If false, logo is not included. True
mdConfigurationProgressbarColor String The color of the progress bar. #FFFFFF
mdConfigurationToolbarColorSet String Which assets to use for the social toolbar elements, the positive ones, which are generally the _ON version of the buttons, or the negative ones, which are generally the _OFF version of the buttons. positive
mdDefaultBannerX Integer The x-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. This is based on an expansion to the right. Any number greater than 0 and the ad will expand to the left as well (and vice versa when expanding the other way) 0
mdDefaultBannerY Integer The y-offset position of the default banner/collapsed state relative to the panel. It needs to be a number with positive value. Any number greater than 0 and the ad will expand up as well as down. 0
mdExpDimHeight Integer Height, in pixels, of the unclipped/expanded state 500
mdExpDimWidth Integer Width, in pixels, of the unclipped/expanded state 728
mdExpToolbarFullWidth Boolean If true, toolbar will be full width of expanded state. If false, toolbar will be width of video in expanded state. true
mdExpVideoDimHeight Integer Height, in pixels, of the video when the panel is in thenclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the width should match the ratio of the source video. 281
mdExpVideoDimWidth Integer Width, in pixels, of the video when the panel is in the unclipped/expanded state This value is ignored if you have the mdExpVideoRatio option turned on. The ratio of this to the height should match the ratio of the source video. 500
 mdExpVideoPositionX String  The horizontal position of the video when the format is expanded.  When using mdExpVideoRatio, the numbers will represent offsets from a horizontally centered video. All other times, the number represents an offset from the 0 X position of the collapsed state. center
 mdExpVideoPositionY String  The vertical position of the video when the format is expanded. When using mdExpVideoRatio, the numbers will represent offsets from a vertically centered video. All other times, the number represents an offset from the 0 Y position of the collapsed state. center
 mdExpVideoRatio  Boolean  If true, forces the video to be as large as it can be, maintaining aspect ratio, without cropping any portion of the video.  When this variable is set to true, mdExpVideoDimHeight and mdExpVideoDimWidth are ignored. False
mdSpeedExpandAnimation String the panel will be expanded and contracted with a specific speed  default
mdcbAudioBehavior Integer

Controls the audio muting/unmuting behavior.

1 - click to enable audio
2 - audio enabled when moused-over and panel expanded only
3 - mouse over to enable audio

1
mdcbAutoExp Integer

Controls the frequency cap for the auto expansion.  Uses HTML Local Storage.

1 - 1 time per user per day
2 - Always
3 - Never

1
mdcbCloseBtnPos Integer

Controls the position of the close button within the social toolbar.

1 - Normal (if left-expanding, put close on left; if right-expanding, put close on right)
2 - Reverse (if left-expanding, put close on right; if right-expanding, put close on left)

 

1
mdcbCustomCode String

Executes this code on the publisher’s page when the ad loads

undefined
mdcbCustomStyle String Adds custom CSS rules in page when ad loads undefined
mdcbExpDir Integer

Controls the expanding direction

1 - left to right expansion
2 - right to left expansion
3 - automatic detection of the expanding direction

3
mdcbExpType Integer

Controls the type of expansion, click/tap or mouse over.

1 - Expand on click
2 - Expand on mouse over

1
mdcbVideoLoop Integer

Controls the number of times the video plays in the ad

(Forever = -1), (Video plays only after click = 0), (numbers: 1, 2, 3)

0
mdcbZIndex String Overrides the z-index of the panel.  Sets eyediv z-index to auto and sets panel div z-index to this value. undefined
mdEyeDivZIndex  String  The default z-index of the eye div. undefined
mdInteractionsCancelAutoCollapse  Boolean  After some interaction in the Ad the autocollapse will be canceled False
mdAutoCollapseTimer Integer Delay to auto collapse header pane when panel auto expands.  0
mdAutoRepositionInterval Integer If >0, will fire a resize event to the ad every n milliseconds, effectively forcing the ad to reposition itself. Useful when other elements on the page (pushdowns, etc) move our banner and our panel is no longer aligned properly. 0
mdBackupImgPath String  Relative path to the backup image, if a custom image is desired. This allows a fallback experience to display an image that is not a 1x1 even though the tag is a 1x1 tag. Template workspace includes a file that could be used here as an example, if this custom var were set to "images/970x250_Default.jpg" When set to undefined, the normal 1x1 fallback occurs  undefined

mdIsDomainConfigEnabled

Boolean

Whether or not to load the programmatic settings.

false

mdProgSettingsFolderPath

String

Location from which to load the programmatic settings files.

//services.serving-sys.com/programmatic/DomainList/

mdParentLevelsToResize

Number

This var is ONLY for the mdBackupImage experience. If you set this var to true, then the min-width and min-height of the parent elements of the ebDiv tag will be set to the dimensions of the backup image, so that the backup image will not be cropped/clipped

0

 

Change Log

Release: Aug 20, 2018 (v2.1.0)

  • Manifest file has been included, and now when you create this format in SAS, the setup will be loaded from the config.js file
  • Now it’s supported in Mobile Devices. There are two new images when the Ad is loaded in mobile devices (for Landscape mode: mobile_landscape_960x640.jpg, and for portrait mode: mobile_portrait_640x960.jpg) and the panel will be expanded in full-viewport by default only in mobile devices.
  • Safeframe now is supported
  • Local preview now is supported. You can test the different behaviors changing the custom variables and the SmartVersioning elements
  • The custom variable "mdConfigurationBgColor" has a new option if you want to show the background image when the panel is expanding and collapsing
  • There are some new custom variables: mdSpeedExpandAnimation, mdAutoCollapseTimer, mdEyeDivZIndex, mdProgSettingsFolderPath, mdIsDomainConfigEnabled, mdAutoRepositionInterval, mdBackupImgPath and mdParentLevelsToResize
  • These variables have been renamed: "mdcbApplyCustomBehavior" now is "mdIsDomainConfigEnabled", "mdSettingsFolderPath" now is called "mdProgSettingsFolderPath" and "mdAutoTimeoutInterval" now is called "mdAutoCollapseTimer"
  • Some Icons of Social Networks were removed from the SmartVersioning Elements: Android, Apple,  BlackBerry, Google Plus and Windows
  • Some minor bugs were fixed

Release: Oct 26 2017 (v2.0.0)

  • Rename HTML5 Programmatic Video Expandable to Video Expandable.

Release: Nov 11, 2015 (v1.0.0)

  • Initial Release

 

Known Issues

  • Close button will always appear as a part of the Social Toolbar. If you require the close button in the expanded state to be at the top of the ad, you must also set your social toolbar to be at the top of the ad.
  • In IE and Edge if the video is playing during the animation of expanding and collapsing the panel, the reposition of the video will not very smooth

 

 

Copyright 2017 Sizmek. All rights reserved.

The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice.

 

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.

Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.

 

 

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

Comments