Submit a request
PRODUCT
Privacy Policy  |  Terms of Use
Follow
Last Update:
  viewable by end users
  editable by agents

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

portrait.png		  

Cropped in Landscape

landscape.png

Non-Cropped in Portrait

portrait_nocrop.png		  

Non-Cropped in Landscape

landscape_nocrop.png

 

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.

 

Default Placement Size Bannerdefault.png
Publisher Ad Container Size Bannercontainer_width.png
Full Width Bannerbrowser_width.png

Demos/Downloads

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

Template

VerticalVideo_1.1.0_300x50.zip

Demo

Preview 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

index.html

The banner file.

panels/expand/index.html

The expand panel file.
CSS

The following CSS template files are included.

File Name

Description

styles/reset.css

The style sheet resets the banner and panel so they can have a clean style to start with.

styles/style.css

The style sheet for banner creative.

panels/expand/styles/style.css

Style sheet for expand panel creative.
 
Scripts

The following JavaScript template files are included.

File Name

Description

scripts/script.js

Script file for banner to load and initialize banner creative.

scripts/localPreview.js

Script file for enable preview banner and expand panel locally.

panels/expand/scripts/script.js

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

images/backup.jpg

Backup image.

images/logo_sizmek.svg

panels/expand/images/logo_sizmek.svg

Logo image.

panels/expand/images/poster.jpg

Poster image for the video.

panels/expand/images/

play_video_button.png

Play video button image.

images/banner_background.jpg

Banner background image.
Videos

The following video template files are included in the videos folder:

File Name

Description

panels/expand/videos/video.mp4

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

bannerDiv, bannerRollover, contentLabel, expandButton, videoContainer

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.

sdkData, adId, rnd, uid, enableBannerRollover

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

checkIfAdKitReady

Check to see if the adKit is ready and then proceed to initialize creative.

initializeCreative

Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized.

initializeGlobalVariables

This is where we initialize the global variables for HTML objects. In the template, we also call setBanner to setup banner elements.

addEventListeners

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.

setBanner

This is where we setup the banner elements.

handleExpandButtonClick

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.

showBannerRollover

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

videoOriginWidth

Specify the video width from video meta data.

videoOriginHeight

Specify the video height from video meta data.

expansion, panelContainer, closeButtonContainer, landscapeCloseButton, portraitCloseButton, videoContainer, videoBase, video, playVideoButton, logoContainer, lightbox

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.

isLandscape, animationEndEvent, videoTrackingModule, videoOverrideClicks, sdkData, adId, rnd, uid

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

checkIfAdKitReady

Check to see if the adKit is ready and then proceed to initialize creative.

initializeCreative

Initial creative. You may add your own script here if you wish to execute a script when the creative is initialized.

initializeGlobalVariables

This is where we initialize the global variables for HTML objects. In the template, we also made some video attribute adjustments.

initializeCloseButton

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.

initializeVideo

This function initializes the video including hide video controls and hook up with the video tracking.

addEventListeners

This is where we add all the event listeners.

handleExpandButtonClick

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.

handleCloseButtonClick

Call this function to close the panel. This function also pause the video.

handleUserActionButtonClick

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.

getAnimationDuration

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.

drawExpansion

This function plays expand animation.

expandAnimationComplete

This function called when expand animation completed. You can add your own method here if you want it happened right after expand animation complete.

expanded

This function called when panel expanded (with or without expand animation).

drawCollapse

This function plays collapse animation.

collapseAnimationComplete

This function called when collapse animation completed. You can add your own method here if you want it happened right after collapse animation complete.

collapsed

This function called when collapsed (with or without expand animation).

onPageResize

This function called when panel resized.

setOrientation

This function set the isLandscape variable, it also trigger setCloseButton to setup the close button and clipVideo to clip the video.

clipVideo

Thie function crop and position the video.

setCloseButton

This function switch betten large and small close button based on the orientation and screen dimension.

showPlayButton / hidePlayButton

These functions display / hide the play video button.

onVideoPlay

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.

onPlayClick

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.

playVideo

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.

pauseVideo

This function pause the video.

showVideo / hideVideo

These functions display / hide the video.

hideVideoControls / showVideoControls

These functions hide / show video controls.

muteVideo / unmuteVideo

These functions mute / unmute the video.

Setting up Interstitial in the Sizmek Platform

Sizmek MDX Setup

  1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In the Sizmek MDX2.0, under Creative Assets, create a new Workspace by uploading the ZIP file.
  3. Under the Ads section, create a new ad.
  4. 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
  5. 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
  1. 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.
  2. Add the URL for the default click-through.
  3. Save the ad.
  4. Create a new placement for the ad.
  5. Fill out the form. Set the Placement type to In Banner and the Banner size to 300x250.
  6. 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

  1. Archive the workspace into a new ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. Click the Creative menu item > Asset Library, Upload your Workspace the chosen folder.
  3. Click the Creative > Ads and click the New Ad button and select Blank Ad.
  4. Set workspace location and all details will be auto filled. 
  5. Save the Ad.
  6. Under the Advanced Features section, customize the Variables to your needs.
  7. Create a new placement for the Ad.
  8. Fill out the form. Set the Placement type to In Banner and the Banner size to 300x250.
  9. 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

mdEnableExpandCollapseAnim

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.
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments