配置原生视频广告样式

您可以参阅我们的原生样式设置文档，了解原生样式选项并查看相关示例。

当您为原生视频广告设置样式时，应将视频播放器放入 HTML 元素（含 #%NATIVE_VIDEO_WRAPPER%# 宏的 div 会触发该播放器）中，以保持播放器的宽高比并使播放器尝试占据元素中尽可能多的空间。因此，在设置原生视频广告格式的样式时，需注意下列三个要点。

1. 明确指定包含原生视频广告封装容器的 div 的尺寸

包含 #%NATIVE_VIDEO_WRAPPER%# 宏的 div 的尺寸必须通过 CSS 完全限定（采用百分比或像素的形式）。

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

2. 注意视频和容器 div 的宽高比，以免出现内边距

如果容器 div 的宽高比不同于视频播放器的宽高比，视频周围便会出现内边距。内边距的颜色是透明（移动应用）或黑色（移动网站和桌面网站）的。该示例显示的是宽高比大于视频宽高比的容器 div。 要创建没有内边距的容器 div，相应容器 div 的宽高比必须与视频的宽高比保持一致。如果视频的宽高比事先就知道，则可使用下列 HTML 和 CSS 呈现完美契合视频的 div。

示例：div 的宽高比大于视频的宽高比

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. 了解 HTML 元素会与视频播放器如何叠加

在移动应用中实施的视频播放器始终在其他 HTML 元素之下呈现。这种行为是特意而为，可让标题等元素与您的视频叠加。

对容器 div 设置 Z-index 对这种行为没有任何影响，而设置容器 div 的背景色则会导致 div 覆盖整个视频播放器。

封装您视频的所有 div 元素都必须是透明的。如果某个容器 div 包含并非透明的背景，则该容器 div 会与您的视频叠加。

通过使用 SDK，您可以控制视频周围所有内边距的颜色，同时确保容器 div 保持透明。为此，请在您的 CSS 中对主体元素设置 background-color。SDK 会将此值用作视频周围所有内边距的颜色。

body {
  background-color: aliceblue;
}