PRODUCT
Follow

Overview

The HTML5 VPAID Responsive template implements the Sizmek VPAID protocol and provides common functionality and examples of responsive behavior for developers to use, modify, or reference in the creation of their own responsive VPAID ads for HTML5. Responsive behavior is particularly relevant for VPAID ads because they run across a variety of player networks with numerous different player sizes and the ability to go full-screen.

Cascading Stylesheets (CSS) augment the template to include the following responsive enhancements:

  • Being able to position elements relative to the bottom and right side of the ad.
  • Being able to automatically re-distribute contents based on available space (like stacking product listings in a 3x2 grid when wide versus a 2x3 grid when tall).
  • Being able to specify alternate layouts based on the player’s size and shape (like adding, removing, or replacing content when the player is large, small, or of a different aspect ratio).

On a more technical level, there are three primary ways to attack responsive behavior with CSS and this template shows the benefits of all 3 of them:

  • Basic CSS allows us to do relatively powerful things like anchoring an ad element to any side or corner, either by a fixed amount of pixels, or a percentage of the viewable width/height. We can also scale items easily using percentages and vw/vh units.
  • CSS has a wide array of display schema, including the powerful flexbox schema, that make handling dynamic flow of elements across changing dimensions fast and simple.
  • Media Queries give a developer even more control over the layout at various breakpoints.

Ad developers unfamiliar with CSS and without the time to explore the simple techniques above are also provided a JavaScript method to provide limited responsive behavior on static HTML. It supports responsive behavior to fit the wide variety of player sizes by letting the ad developer name any number of HTML elements or groups they want to be responsive. A JavaScript function scales those elements relative to the top-left position of the page whenever the ad is resized. A limitation of this implementation is that responsive ad elements must be positioned relative to the top/left corner. It’s still possible to position an element near the bottom of the ad or the right or both, but it’s more complicated to do so, and certain types of interactivity and animation won’t work as well. 

 

Demos/Downloads

The following table provides links to the template and demo for the HTML5 VPAID Responsive format.

Template

VPAIDResponsive_2.0.27.zip

Demo

Preview demo

 

Supported Platforms

Platform

Supported Versions

iOS

iOS 10 and later

Android

Android 6 and later

Internet Explorer

11.0 and later

Firefox

Recent versions

Chrome

Recent versions

Safari (Mac)

10.0 and later

Note: Supported in Mobile Web (Mobile browsers) only and not In-App.

Implementing an HTML5 VPAID Responsive Template

Before you Begin

Make sure you have the HTML5 VPAID Responsive template workspace that is applicable for your campaign. Download the workspace and extract it, preserving the directory structure.

Workspaces

Template

Workspace

Default Format Dimensions

HTML5 VPAID Responsive

CFG_QA_VPAIDHTML5Responsive_2_0_27_640x360.zip

640x360

 

Included Template Files

The different overlay panels, contain different assets, please read the below to find out more.

HTML

HTML template file.

File Name

Description

index.html

The entry point for the template. Provides the basic HTML structure for reference in script.js and style.css.

 
Styles

CSS template files:

File Name

Description

css/style.css

style.css is the cascading stylesheet for the creative

css/reset.css reset.css is a utility stylesheet
Scripts

JavaScript template files:

File Name

Description

js/script.js

script.js contains the logic for interacting with the VPAID API. See the Script.js section of this document for more detailed information

js/localPreview.js

localPreview.js fakes just enough of the online platform to allow you to run the index.html from your desktop. You will not see a content video or skip/close buttons, but you will see the ad video and can test your ad's responsiveness.


Images

The following image template files are included in the images folder.

File Name

Dimensions

Description

images/logo.png 200x53 logo image
images/poster.jpg 480x270 poster image for the primaryVideo
 
Videos

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

videos/mdx-nxt-short.mp4

1280x720

Primary Video for local testing in mp4 format.

 

Common Customizations

Positioning Elements Responsively

Suppose we always want our play/pause button to appear in the top-left corner of the ad. We can do this very easily be giving it top and left css styles. If we want it to be 50px from the corner regardless of the size of the player, top:50px and left:50px will do the trick beautifully. Or, if we want its distance from the edge to scale in larger displays, we can set a percentage instead. top:5%, left 5%, for example.

If we want a logo in the bottom-right corner, CSS allows us to set bottom:50px, right:50px instead of top/left.

And if we want to center something, perhaps an overlay pane, we can start with top:50%, left:50% and then adjust for the size of the element we're centering via transform(-50%, -50%).

In this template, the buttons are positioned relative to the top-left corner of the video via margins (so no top/left/bottom/right style is specified). The logo is positioned 5% from the bottom and the right, so it's a bit further away in full-screen.

ad_large.PNG

This full-screen image is shrunk to about a third of its full size so you can compare to the above.

ad_full.PNG

Sizing Elements Responsively

One of the big aesthetic advantages to smart responsive scaling is being able to leave buttons that really want to be 200x60 at their starting size, rather than scaling them to massive size when full-screen, but some elements really do want to scale. If your ad has a bar that overlays the entire bottom edge of the ad, for instance, that will need to scale for each publisher player and display mode. This is also easy with CSS.

width:100% will keep that bar the full width of our player regardless of the size. Maybe we want its height to stay at height:150px no matter what, or maybe we want it to be height:20% to always take 1/5th of the player's height, whatever that height is. Those are both likely and attractive options here. Another slightly stranger option is to set the height proportional the player's width. height:10vw will set the height of your element to be 10% of the viewable width of the player area. That CSS will keep our example bar the same height (64px) in a 4:3 player that's 640x480 as it does in a 16:9 player that's 640x360, where height:10vh would go from 48px to 36px, respectively.

The only element this template is sizing this way is the #responsiveGroup div which contains all of the ad elements (except the invisible, full-area click button). It is being assigned width:100vw and height:56.25vw so that it will always fill the player's full width and it's height will conform to the video's 16/9 aspect ratio. This allows us to position elements relative to the video (as scaled to fit the player) as opposed to the player itself. If we used height:100vh instead, ad elements would be positioned relative to the player. This makes a difference when the video and the player are different aspect ratios and there are black bars on the top and bottom.

ad_tall.PNG

Distribute Elements Responsively

One of HTML's natural strengths is distributing content on a page. If you place five images inline and the page can fit two across, it will naturally stack them with two on top, two in the middle, and one on the bottom. There are a number of new, more advanced ways to handle content like this. The most generally use of these is Flex Box, which allows you to specify how items are distributed and aligned across the available space quickly and easily. Here is the best guide to Flex Box.

In this template, the play/pause, un/mute, clickthrough, interaction, and skip/close buttons are being distributed responsively via Flex Box in a div made to match the video's area (as opposed to the player's area which could be larger if it's aspect ratio doesn't match the ad video). You can see those images being placed left to right from the top of the area down as they fit in these three players of different sizes.

ad_large.PNGad_medium.PNGad_small.PNG

Changing Elements and Layouts Responsively

The newest CSS introduces the concept of a media query which is invaluable for responsive design that accounts for mobile devices as well as desktop. At a certain point, what you'd choose to put on a 19" landscape desktop screen versus a 4" portrait phone screen will rarely be the same. Media queries allow you to make explicit decisions about your ad's layout for wildly different displays by letting you specify different styles for your elements in the case of specific player dimensions.

You might show a description for your product on a large screen in addition to the title and price that you show on a small screen. You might display a product detail image when the display is tall and skinny (portrait), but product environment image when the display is short and wide (landscape).

Example

ad_large.PNG

ad_small.PNGHere's CSS for a media query that shrinks a logo element to half-size when the ad's width drops below 435px or its height drops below 230px.

@media (max-width: 435px), (max-height: 250px) {
  #logo {
    transform:scale(.5);
  }
}

 

 

ad_tiny.PNGHere's a media query that hides that same logo when the ad's width drops below 310px or its height drops below 175px.

@media (max-width: 310px), (max-height:175px) {
  #logo {
    display: none;
  }
}

These two queries can co-exist and complement each other, giving the logo three possible states (full-size in a large space, half-size in a small space, absent in a tiny space) depending on available space.

For more details on media queries, check out MDN's explainer or W3's.

Scaling your entire creative automatically

If you don't want to mess with CSS any more than you have to, this template also offers an alternative solution via javascript that is very quick to implement and has just a few limitations. In order to use it, all you need to do is call ebInitResponsive(["responsiveGroup"]) where 'responsiveGroup' is the id of the div containing all the elements you want to include in the scaling. Alternately, you can list any number of specific elements by their id, like this: ebInitResponsive(["element1", "element2", "element3"]). Do be sure not to include adContainer or videoClickOverlay. Because this method scales relative to the top-left origin, all of your elements will have to be positioned relative to that. If you want your 100px wide logo to appear 20px from the right edge and the unscaled size of your ad is 640px, you'll position it at left:520px instead of right:20px. Animating elements to change size is not recommended using this solution. If you try this method without removing the responsive CSS already present in the ad, you will likely see erratic behavior.

 

Setting up an HTML5 VPAID Responsive ad in the Sizmek Platform

Set up in the MDX2.0 Platform

Procedure
  1. Archive your modified HTML5 VPAID Responsive workspace as a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In Sizmek MDX, under Creative Assets, create a new folder for your ad and upload your Workspace into this folder.
  3. Under the Ads section, create a new ad and name it.
  4. Set the Ad Format to In-Stream Video found under the Video header
  5. Then set Vast Template Format to In-Stream Video - Interactive
  6. In the Creative section, click the arrow to expand the Linear sub-section. Click Add to find and select the workspace that you uploaded in step 2.
  7. Set the Duration to match your video duration.
  8. Optionally, expand the Skip Settings and check "User can Skip Linear Elements after 5.0 Seconds."
  9. Enter a Clickthrough URL.
  10. Expand the Additional Assets List, and click Add Asset. Select the video inside your workspace. If you don't see it, add it there again.
  11. Save the ad.

Set up in the Sizmek Advertising Suite Platform

Procedure
  1. Archive your modified HTML5 VPAID Responsive workspace as a ZIP file, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.
  2. In Sizmek SAS, under Creative > Assets Library, create a new folder for your ad and upload your Workspace into this folder.
  3. Under the Creative > Ads, create a blank ad and name it.
  4. Set the Ad Format to In-Stream Video - Interactive
  5. In the Creative Assets > Linear section, click Add to find and assign the workspace that you uploaded in step 2.
  6. In the Settings section, set the Duration to match your video duration.
  7. Optionally, check "skip ad after 0 Seconds" and enter 5 or another number.
  8. Go to the Additional Assets tab, and click Add. Select the video inside your workspace.
  9. Enter a Clickthrough URL.
  10. Save the ad.

 

 

Change Log

Release: November 15, 2017 (v2.0.27)

  • The template now follows the same model as all CIT templates.
  • The template now uses CSS to achieve all responsive behavior.

 

Known Issues

  • Some versions of IE/Edge don't have the option to Allow Blocked Content. These do not allow local preview of VPAID ads because the Sizmek bridge is online and the files are offline. Fix expected 11/24/17.
  • Ad behavior and reporting is unreliable in Mac Safari and Samsung Internet browsers when the video has completed but the ad remains due to user interaction, particularly on replay.
  • Uploading zipped workspaces during the platform build process may generate issues due to excessive file size. This can be avoided by leaving empty video subfolders and then only uploading necessary videos into their correct folder via the creative assets portion of your workspace.
  • Several issues have been identified when using the Google Video Suite Inspector that do not affect actual live ad behavior. These generally occur when the Tag is reloaded secondarily after the test player has loaded and the entire bag is not refreshed but the ad is relaunched from the "TEST AD" button. So to ensure consistent and reliable testing, always refresh the test player page before testing your tag with the Google Video Suite Inspector.

 

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.

 

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