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 |
|
---|---|
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 |
|
Required SDK (for mobile app) |
Native styles
Custom rendering
|
* 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 |
Example: div ratio greater than video |
<div class="video-ratio-wrapper"> <div class="video"> #%NATIVE_VIDEO_WRAPPER%# </div> </div>
.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; }