VPAID format

HTML5 VPAID linear creative guide

Overview

VPAID creatives are rich media creatives that render in a publisher's in-stream video player. One important ability of VPAID creatives is that they can pause or mute the publisher's video player and bring up their own content, including interactive options.

With Studio, you can build engaging, interactive VPAID in-stream video ads using familiar components and APIs.

Studio supports linear VPAID creatives.  

A linear VPAID creative appears by itself, not alongside publisher content. It can appear before, between, or after the publisher's video. For example, a VPAID linear creative might interrupt a publisher's cartoon to display a video commercial with interactive graphics overlaying the advertiser's video content. 

Limitations

  • HTML5 VPAID creatives aren't skippable.
  • Studio doesn't support HTML5 non-linear creatives.

Scaling and graphics

VPAID creatives scale to fill the publisher's video player while maintaining their aspect ratio. If the aspect ratio of the creative doesn't match that of the publisher's player, the creative scales to fill one dimension entirely and is centered in the other dimension, with black bars filling the empty space. This is referred to as letterboxing. This means that when serving across multiple publishers or across a network, the creative will be scaled up or down to fit that publisher's player.

Follow these best practices to ensure that your creative appears optimally across all publishers:

  • Use vector graphics when possible.
  • Design the creative to match the largest player size that it will run in.
  • Use a responsive approach (sizes and positioning parameters in % rather than in pixels) to better fit the available space.

Get started

Step 1: Start with an HTML5 banner creative

Build your HTML5 VPAID creative the same way you build an HTML5 banner creative. Studio's Enabler handles communication with the publisher's video player for you.

Don't use polite loading–it's incompatible with VPAID and could cause creative loading issues.

Basic VPAID templates are also available through on the Rich Media Gallery.

Step 2: Add a video

Add video to your VPAID creative with one of the following options:

Supported media types for HTML5 video
File format Media type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Step 3: Close the creative

A VPAID linear creative must close when it’s done so it can fire the necessary events to the publisher’s video player. This applies both to when the video completes and when you add an exit and pause your video.

Call Enabler.close() or trigger the corresponding method from Google Web Designer to close your ad.

Preview and test

  1. Upload to Studio: After your creative is complete, upload it to Studio.
  2. Preview and test: As you're testing the functionality of your creative, make sure you check that the video duration is correct in the Display Properties section of the preview panel.
  3. QA: Once you've previewed the creative, send it through your QA approval process.

VPAID creatives are not supported by the Creative Preview app. To preview directly on a mobile device, push the creative to Campaign Manager and export the tags, then view the tags on your mobile device.

After the creative has been trafficked in Campaign Manager and you have a VAST tag for it, you can also use the VAST Video Suite Inspector to preview how it looks inside a sample video. Click "Switch to HTML5 player" underneath the sample video to use the HTML5 player.

Traffic

When your creative is ready, follow Campaign Manager's guide for Trafficking VPAID creatives in Campaign Manager.

Was this helpful?
How can we improve it?