Configure native video style

Learn about native style options and see examples in our native style settings documentation.

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.

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;
}