Introduction
Overview
The Vertical Video is a video format that expands to reveal a full screen, responsive video ad. In the expansion panel, there is no content besides the video, close and mute/unmute button. Expectations are that the format will always be shown in full screen mode, but there are options for cropping the video and surrounding it with a black mask. The format is intended for videos that have been shot vertically so that it looks great on phones while held in portrait mode. Portions of the video may be trimmed so that you are always presented with a full screen video across mobile devices and browsers of varying sizes and aspect ratios. However, this format is not restricted to only vertically shot video. Based on the dimensions of the video and customizations supplied to the ad, videos may be set up to look great in both portrait and landscape modes across desktop, tablet and mobile browsers as well as in mobile apps.
The format initially loads a banner which may be a fixed size or responsive and sized to the publishers ad container or the width of the browser. Once expanded, the video extends to the full viewport width and height and provides a full screen video experience. Since the size of the viewport may not match the aspect ratio of the video, the sides and/or top/bottom of the video that extends outside the viewport will be cropped. The cropped options are provided as a single custom variable so publisher can set up easily and get more flexibility to display the video properly for their ad.
Please note that when a video is cropped in portrait, it will always show an uncut video from the top of the viewport to the bottom of the viewport, but portions of the video may be cut horizontally so that it fits within the viewport. It will always show the center vertical portion of the video. When a video is cropped in landscape, it will always show an uncut video from left of the viewport to the right of the viewport, but portions of the video may be cut vertically so it fits within the viewport. Likewise, the center horizontal portion of the video will be shown.
The following images show different ways the video may be cropped. If a video is non-cropped, you will always see 100% of the video, but black bars may be needed if the video aspect ratio does not match the aspect ratio of the browser/device.
Cropped in Portrait ![]() |
Cropped in Landscape ![]() |
|
Non-Cropped in Portrait ![]() |
Non-Cropped in Landscape ![]() |
The Vertical Video also supports mobile auto-play for devices that natively support it. At the current time, mobile auto play is supported on Android 5.0+ with the latest Chrome Browser and iOS 10.0+ with the latest Safari and Chrome browsers.
The Vertical Video also has options for making the banner responsive. The images below show you the banner in default placement size, full width, and publisher ad container size.



Demos/Downloads
The following table provides links to the template and demo for the Vertical Video format.
Template |
|
Demo |
Supported Platforms
Platform |
Supported Version |
Windows |
Internet Explorer 10+, Microsoft Edge, Firefox, Chrome, Safari |
Mac |
Safari, Firefox, Chrome |
iPhone |
iOS 9.0 and later, MRAID Apps |
iPad |
iOS 9.0 and later, MRAID Apps |
Android Phone |
Android 6.0 and later, MRAID Apps |
Android Tablet |
Android 6.0 and later, MRAID Apps |
Format Properties
Listed below are common properties available to the format.
Feature | Supported |
Polite Loading | ✓ |
Safeframe Support | ❌ |
MRAID (in APP Support) | ✓ |
AdKit ready 1 | ✓ |
Liquid Tool (One-Tag Solution) | ✓ |
Secure Serving | ✓ |
Sizmek Advertising Suite Support | ✓ |
Ad Builder Templates Available | ❌ |
1 Allows for DCO Support as well as Additional Assets.
Note: This format uses the HTML5 Expandable Banner as the base format.
Note: This format includes a fully “domain configurable” / "Liquid Framework" solution. For more information on the domain configurable formats in general, and how to preview the different certified settings, please see Domain Config Solution for Custom Formats
Implementing a Vertical Video Ad using Workspaces
Workspaces Available
Workspace |
Video |
Banner Dimension |
Default Panel Dimension |
VerticalVideo_1.1.0_300x50.zip |
Yes |
300x50 |
Full-Screen |
Included Template Files
HTML
The following HTML template files are included.
File Name |
Description |
|
The banner file. |
|
The expand panel file. |
CSS
The following CSS template files are included.
File Name |
Description |
|
The style sheet resets the banner and panel so they can have a clean style to start with. |
|
The style sheet for banner creative. |
|
Style sheet for expand panel creative. |
Scripts
The following JavaScript template files are included.
File Name |
Description |
|
Script file for banner to load and initialize banner creative. |
|
Script file for enable preview banner and expand panel locally. |
|
Core script file to expand panel to load and initialize panel creative. |
Images
The following image template files are included in the images folder.
File Name |
Description |
|
Backup image. |
|
Logo image. |
|
Poster image for the video. |
|
Play video button image. |
|
Banner background image. |
Videos
The following video template files are included in the videos folder:
File Name |
Description |
|
Demo videos in mp4 format. |
Customizing Vertical Video
To customize the Banner:
To customize the Banner, first open index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag in the index.html to create your own creative content.
Second, you may also want to make changes to the styles/style.css based on your content design. Finally, open scripts/script.js in JavaScript editing tool and add your own script for Expand Panel here. Below are the variable and function explanations for the template.
Variables
Variable Name |
Description |
|
Global variable(s) that will be used for define the HTML objects later. You may add/edit/remove the variable(s) if modify the HTML objects. |
|
These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables. |
Functions
Function Name |
Description |
|
Check to see if the adKit is ready and then proceed to initialize creative. |
|
Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized. |
|
This is where we initialize the global variables for HTML objects. In the template, we also call |
|
This is where we add all the event listeners. In the template, we have added the click event to the expand button and banner rollover. |
|
This is where we setup the banner elements. |
|
Call this function to expand the panel. We also hide the banner rollover and blockt the banner rollover for 500ms to prevent rollover stays on because mosueout event not trigger properly during the expand panel expands. |
|
This function show the banner rollover. |
hideBannerRollover |
This function hide the banner rollover. |
To customize the Expand Panel:
To customize the Expand Panel, first open panels/expand/index.html in an HTML-authoring environment so you can edit/alter all the html elements within <body> tag in the index.html to create your own creative content.
Second, you may also want to make changes to the panels/expand/styles/style.css based on your content design. Finally, open panels/expand/scripts/script.js in JavaScript editing tool and add your own script for Expand Panel here. Below are the variable and function explanations for the template.
Variables
Variable Name |
Description |
|
Specify the video width from video meta data. |
|
Specify the video height from video meta data. |
|
Global variable(s) that will be used for define the HTML objects later. You may add/edit/remove the variable(s) if modify the HTML objects. |
|
These variables use to store values that are necessary when running the ad. Please do NOT make any change to these variables. |
Functions
Function Name |
Description |
|
Check to see if the adKit is ready and then proceed to initialize creative. |
|
Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized. |
|
This is where we initialize the global variables for HTML objects. In the template, we also made some video attribute adjustments. |
|
This is where we initialize close button, we check the serving environment and custom variable to decide if we should display the close button here. |
|
This function initializes the video including hide video controls and hook up with the video tracking. |
|
This is where we add all the event listeners. |
|
Called when creative is initialized so the function can prepare the panel and expands with or without playing animation based on the custom variable setting. |
|
Call this function to close the panel. This function also pause the video. |
|
This function is an example for how we call and track the user action. This function also pause the video when there is a video. |
handleClickthroughButtonClick |
This function is an example for how we call for trigger a default click-through. |
|
This function get the animation duration from the css so we can use the duration for the platfrom that does not support animation end event. |
|
This function plays expand animation. |
|
This function called when expand animation completed. You can add your own method here if you want it happened right after expand animation complete. |
|
This function called when panel expanded (with or without expand animation). |
|
This function plays collapse animation. |
|
This function called when collapse animation completed. You can add your own method here if you want it happened right after collapse animation complete. |
|
This function called when collapsed (with or without expand animation). |
|
This function called when panel resized. |
|
This function set the isLandscape variable, it also trigger setCloseButton to setup the close button and clipVideo to clip the video. |
|
Thie function crop and position the video. |
|
This function switch betten large and small close button based on the orientation and screen dimension. |
|
These functions display / hide the play video button. |
|
This function called when video plays, we use it to hide the play video button, clip video and display video. |
onVideoEnd |
This function called when video ends. |
|
This function called when user click the play video button to play the video. We also send an user action counter "Video_OverlayPlay_Clicked" so we can keep track how many user click to play the video. We also unmute the video here. |
|
This function called when panel expands, when panel expands, the video should plays automatically unless the device does not support the auto play. This function will always try to play the video and check the current video time after 1500ms, if the current time does not increase, then we assume the device does not support auto play and we will display play video button for use to click. |
|
This function pause the video. |
|
These functions display / hide the video. |
|
These functions hide / show video controls. |
|
These functions mute / unmute the video. |
Setting up Interstitial in the Sizmek Platform
Sizmek MDX Setup
- Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
- Under the Ads section, create a new ad.
- Set Ad Format to Vertical Video and fill out the form.
Note: In the Sizmek platform, your user account will need access to the Vertical Video format in the list of available custom formats. If you do not have access to this format, please reach out to Support to gain permissions for this format - Under Panels List, add default panel using following settings:
- Panel Name: expand
- Creative Asset: Please select
panels/expand/index.html
from the root of workspace. - Dimension: 0x0
- Auto Expand on Mouse Over: Unchecked
- Delay Expansion: Unchecked
- Auto Retract When: Never
- Position Type: Page Relative-Pixels
- X: 0
- Y: 0
- For the Panel Settings, please make sure the Show Single Panel at a Time is selected and Auto Expand Default Panel when Ad is Loaded is not selected.
- Add the URL for the default click-through.
- Save the ad.
- Create a new placement for the ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 300x250.
- After you’ve saved your placement, you can then generate preview tags to test on your web site.
Note: Custom Script Notice Since the Interstitial 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_VerticalVideostitial.js
Sizmek Sizmek Advertising Suite Setup
- Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
- Click the Creative menu item > Asset Library, Upload your Workspace the chosen folder.
- Click the Creative > Ads and click the New Ad button and select Blank Ad.
- Set workspace location and all details will be auto filled.
- Save the Ad.
- Under the Advanced Features section, customize the Variables to your needs.
- Create a new placement for the Ad.
- Fill out the form. Set the Placement type to In Banner and the Banner size to 300x250.
- After you’ve saved your placement, you can then generate preview tags to test on your web site.
Custom Script Notice:
There is no need to attach a custom script since the appropriate one will be pulled in automatically if you select the format via the platform's Ad Setup. However for reference, the following custom script is being used:
PL_VerticalVideostitial.js
Custom Variables
Custom Variable Definitions
Variable Name |
Type |
Description |
Default Value |
mdAutoRepositionInterval |
Integer |
Repositions all panels every N milliseconds. if set to 0, automatic repositioning is disabled. |
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. For example, if this custom var were set to "images/300x250_Default.jpg," then a file would attempt to be loaded from the images folder. You must be sure this file exists in the workspace. When set to undefined, the normal 1x1 fallback occurs. |
undefined |
mdBannerSizeInheritance |
String |
Declare what should be based on for the responsive banner size. Available options are: default: banner will display in the placement size, no responsive banner for this option. browserWidth: banner will display in full width of the browser width and placement height. Banner will also responsive in width as browser resized. publisherContainerSize: banner will display in publisher ad container size and will also responsive as publisher ad container resized. |
default |
|
Boolean |
Declare if should play animation when expand and collapse the panel. Available options are: Yes: play expand animation when panel expands. No: play collapse animation when panel collapses. |
Yes |
mdCropOrientation |
String |
Declare the way video should be cropped. Available options are: none: no crop, the video may displayed with black bars around it depends on screen resolution. both: crop video in both landscape and portrait screen resolution. Video fills up entire browser but may be cut of on both side and top and bottom portion. landscape: crop video in landscape screen resolution (when width larger than height). Depends on video aspect ratio and screen resolution, video may just be full height or full width of the browser and leave black bars around it when browser rotated or resized to portrait. portrait: crop video in portrait screen resolution (when width less than height). Depends on video aspect ratio and screen resolution, video may just be full height or full width of the browser and leave black bars around it when browser rotated or resized to landscape. |
both |
mdResponsiveInterval |
Integer |
Declare the responsive interval in millisecond for the banner. By default, the banner will responsive when user resize the browser or scroll the page. If this variable sets to X millisecond, then the banner will responsive every X millisecond despite of user resize and scroll the page. Sets to 0 will disable the interval. |
0 |
mdEnableSDKDefaultCloseButton |
Boolean |
Set to enable(display) the MRAID default close button. Note: we use the MRAID default close button by default in this format. |
Yes |
mdEyeDivZIndex |
String |
Set eye div z-index. |
undefined |
mdIsDomainConfigEnabled |
Boolean |
Set ad to load with domain configuration. |
No |
mdParentLevelsToResize |
Integer |
This variable is only used when the ad is serving a default image. When set to any value over 0, this number of publisher parent elements of our tag will be resized to the default image size, if they are smaller than the default image serving. |
0 |
mdDefaultPanel |
String |
Set the default panel name. |
expand |
mdProgSettingsFolderPath |
String |
Location from which to load the programmatic settings files. |
//services.serving-sys.com/programmatic/DomainList/ |
Common Customizations
Disable Expand and Collapse Animation
To disable expand and collapse animation, please go to Advanced tab in Ad Settings on Sizmek MDX2.0 and change the custom variable mdEnableExpandCollapseAnim
to No. For the Sizmek Advertising Suite platform, please go to Advanced Feature in Ad Settings, change the custom variable Enable Expand and Collapse Animation to No.
Change Video Crop Option
The Vertical Video format is design to display the video fills in the full browser width and height, this means the video may need to be cropped. We offer several crop options based on the device orientation and screen dimension. To change this option, please go to Advanced tab in Ad Settings on Sizmek MDX and change the custom variable mdCropOrientation to "landscape", "portrait", "both", or "none". For Sizmek Advertising Suite platform, please go to Advanced Feature in Ad Settings, change the custom variable "Crop Video Orientation" to the option you desired. For more details, please check Custom JS Variables below.
Reported Custom Interactions
Name | Description |
Video_OverlayPlay_Clicked | Tracks clicks on the play video button. |
Change Log
May 10, 2018
- Manifest config.js incorporated
- Workspace updated to latest base template
- Custom script updated to latest base template
- New brand assets implemented
- Mute/Unmute button added to bottom left corner in panel
- Close button updated to show same view in both portrait and landscape
January 8, 2018
- Custom format renamed from "Vertical Videostitial" to "Vertical Video"
January 24, 2017
- Initial release
Known Issues
- The video will override the click event if the clickable object overlay the video on iOS 8 devices, so the format will move down the video to fit in the close button in iOS 8 devices.
- Some browsers like native android browser may not support auto video properly.
- If the variable mdBannerSizeInheritance is set to publisherContainerSize, the parent container should have a height set to it.
Comments