設定原生影片廣告樣式

請參閱我們的原生樣式設定說明文件，瞭解原生樣式選項並查看範例。

當您為原生影片廣告設定樣式時，應該將影片播放器放在 HTML 元素中 (包含 #%NATIVE_VIDEO_WRAPPER%# 巨集的 div 會觸發播放器)，以維持播放器長寬比，並在元素中盡量填滿最大的空間。因此，您在設定原生影片廣告格式樣式時，應該注意三個重點。

1. 明確指定包含原生影片包裝函式的 div 大小

您必須使用 CSS 明確指定包含 #%NATIVE_VIDEO_WRAPPER%# 巨集的 div 大小，可以指定百分比或像素。

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

2. 注意影片和容器 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 包含不透明的背景，會與影片重疊在一起。

SDK 能讓您控制影片周圍任何邊框間距的顏色，同時確保容器 div 維持透明。您只要在 CSS 中設定 body 元素的 background-color 即可。SDK 會使用這個值做為影片周圍任何邊框間距的顏色。

body {
  background-color: aliceblue;
}

這對您有幫助嗎？

我們應如何改進呢？

設定原生影片廣告樣式

1. 明確指定包含原生影片包裝函式的 div 大小

2. 注意影片和容器 div 的長寬比，以免出現邊框間距

3. 瞭解 HTML 元素與影片播放器重疊的方式

這對您有幫助嗎？

還有其他問題嗎？

嘗試以下步驟：