ネイティブ動画のスタイルを設定する

ネイティブ スタイルのオプションと例については、ネイティブ スタイルの設定をご覧ください。

ネイティブ動画広告のスタイルを設定する際、動画プレーヤーはアスペクト比を保つために 1 つの HTML 要素内に配置する必要があります（div で #%NATIVE_VIDEO_WRAPPER%# マクロを使ってプレーヤーをトリガーする）。また、動画プレーヤーは配置した要素の中で最大限のスペースを使って表示されなければなりません。したがって、ネイティブ動画フォーマットのスタイルを設定するにあたっては、以下の 3 点に留意してください。

1. ネイティブ動画ラッパーを含む div 要素のサイズを明示的に指定する

#%NATIVE_VIDEO_WRAPPER%# マクロを含む div 要素のサイズを、CSS 内に割合（%）またはピクセルで明確に指定します。

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

2. 動画とコンテナ div のアスペクト比に注意し、余白ができないようにする

コンテナ div と動画プレーヤーのアスペクト比が異なると、動画の周囲に余白が生まれます。余白部分の色は、モバイルアプリの場合は透明、モバイルウェブと PC ウェブの場合は黒になります。ここに示す例では、高さに対する幅の比率が、動画よりコンテナ 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 で本文要素に background-color を設定します。SDK では、この値を動画周囲の余白の色として使用します。

body {
  background-color: aliceblue;
}