Native video ad behavior and feature support

In addition to native display ads, Google Ad Manager allows you to create rich video experiences across platforms with native video via video app install ads, video content ads, or custom formats. You can run either video or display formats within a single native ad slot.

Native video ad behavior

Native video ads for Ad Manager allow you full native styling options, including fluid sizing for desktop, mobile web, and mobile app requests. Native video ads display with the following behavior:

Video playback

  • The video automatically plays where not restricted by the browser. In instances where the browser does not allow autoplay, the poster image is shown, and requires users to click to play the video.

    Some browsers may also behave differently when a video playing is out of the user view (for instance, when switching to another tab). This may result in minor Active View and video completion discrepancies.

  • The video automatically pauses when more than 50% out of view and resumes when 50% in view. However, video playback is not explicitly paused if a new tab is opened while the video is playing. In those instances, video playback behavior may vary across browsers.
  • Programmatic native video ads are only eligible to serve to users with a wifi connection. For non-programmatic, all traffic is video-eligible.

Sound

  • Autoplay begins with sound off
  • User must click for sound
 

Feature support and restrictions

Native video ads are supported for app and web placements, all of reservations, direct deals, and indirect programmatic support. The following details apply to native video ads:

Rendering Native styles or custom rendering for mobile app
Video hosting

Ad Manager-hosted or third-party VAST

For Ad Manager-hosted, you can choose to either upload a video asset or provide an asset source URL to use as your creative. The asset should be a supported format that Ad Manager will automatically designate as the mezzanine file, used to transcode into all available formats and sizes.

Hosted video max size 512 MB*
Impression tracking Native video ad impressions are counted after the player begins playing the ad, to align with industry standards for video. For mobile app custom rendering of custom native templates, your app must call the recordImpression method.
Players used
  • Android: EXO player
  • iOS: Google video player
  • Web: HTML5 player wrapped in webview
Required SDK
(for mobile app)
Native styles
  • Android Google Mobile Ads SDK 9.0 or higher
  • iOS 7.16.0 or higher

Custom rendering
  • Android Google Mobile Ads SDK 10.2 or higher
  • iOS 7.16.0 or higher

* Networks without an Ad Manager 360 account are allowed up to 30 MB hosted video.

Restrictions

  • VPAID video is not compatible with native video
  • Creative preview does not currently support native video
  • Custom native video ads are supported for publisher-managed creatives with Programmatic Guaranteed. They are not supported for advertiser-provided creatives with Preferred Deals. See creative type support for Programmatic Direct.
  • Currently, only banner or in-feed placements are available, not interstitials

All content you provide to be used by Google must be according to the terms of service.

Request native video via the SDK

Native video ads for apps can be called using standard display banner ad code.

You are required to use the MediaView asset instead of the ImageView asset if you want to include a main image asset in the layout for your native ad. You can see implementation and available customizations in the developer guide.

HTML & CSS requirements

When you set the style for a native video ad, the video player should be placed inside an HTML element (a div with the #%NATIVE_VIDEO_WRAPPER%# macro triggers the player) to maintain the aspect ratio of the player and attempt to occupy as much of the space within the element as possible. Because of this, there are three important points to remember when styling the native video format.

1. Explicitly specify the size of the div that contains the native video wrapper

The size of the div that contains the #%NATIVE_VIDEO_WRAPPER%# macro must be fully specified with CSS, either with a percentage or pixels.

.host-div {
   width: 300px;
   height: 200px;
}

2. Be mindful of video and container div ratios to avoid padding

If the ratio of the container div is different from the ratio of the video player, padding appears around the video. The color of the padding is transparent (mobile app) or black (mobile and desktop web). The example illustrates a container div with a larger width:height ratio than the video.

To create a container div without padding, it must have the same ratio as the video. If the video aspect ratio is known in advance, the following HTML and CSS works well to render a div that fits the video perfectly.

An example of a video letterbox

Example: div ratio greater than video 

HTML
<div class="video-ratio-wrapper">
  <div class="video">
    #%NATIVE_VIDEO_WRAPPER%#
  </div>
</div>
CSS
.video-ratio-wrapper {
  position: relative;
  width: 100%;
}

.video-ratio-wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

3. Understand how HTML elements overlap your video player

The video player implemented in mobile apps always renders beneath other HTML elements. This behavior is intentional and allows for elements, such as a headline, to overlay your video.

Setting the z-index on the container div has no effect on this behavior, and setting the background color of the container div will cause the div to cover the entire video player.

Any div elements that wrap your video must be transparent. If a container div contains a background that is not transparent, it will overlap your video.

The SDK provides a way to control the color of any padding around your video, while ensuring that the container div remains transparent. To do this, set the background-color on the body element in your CSS. The SDK uses this value as the color of any padding around the video.

body {
  background-color: aliceblue;
}

Was this helpful?

How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
3883113853692685793
true
Search Help Center
true
true
true
true
true
148
false
false