Mengonfigurasi gaya video native

Pelajari opsi gaya native dan lihat contohnya di dokumentasi setelan gaya native kami.

Saat Anda menetapkan gaya untuk iklan video native, pemutar video harus ditempatkan di dalam elemen HTML (div dengan makro #%NATIVE_VIDEO_WRAPPER%# memicu pemutar) untuk mempertahankan rasio tinggi lebar pemutar dan berupaya menempati sebanyak mungkin ruang di dalam elemen. Oleh sebab itu, ada tiga hal penting yang harus diingat saat mengatur gaya format video native.

1. Tentukan secara eksplisit ukuran div yang berisi wrapper video native

Ukuran div yang berisi makro #%NATIVE_VIDEO_WRAPPER%# harus ditentukan sepenuhnya menggunakan CSS, dengan persentase atau piksel.

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

2. Perhatikan rasio div video dan penampung untuk menghindari padding

Jika rasio dari div penampung berbeda dengan rasio video player, padding akan muncul di sekitar video. Warna padding transparan (aplikasi seluler) atau hitam (web desktop dan seluler). Contoh ini mengilustrasikan penampung div dengan rasio tinggi:lebar yang lebih besar dari video. Untuk membuat penampung div tanpa padding, penampung harus memiliki rasio yang sama dengan video. Jika rasio tinggi lebar video diketahui sebelumnya, HTML dan CSS berikut berfungsi dengan baik untuk merender div yang sangat sesuai dengan video.

Contoh: rasio div lebih besar dari 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. Pahami cara elemen HTML menumpang tindih video player Anda

Video player yang diterapkan di aplikasi seluler selalu merender di bawah elemen HTML lainnya. Perilaku ini disengaja dan diizinkan bagi elemen, seperti judul, untuk menempatkan video Anda.

Menetapkan z-index pada penampung div tidak berpengaruh pada perilaku ini, dan menetapkan warna background penampung div akan menyebabkan div tersebut menutupi seluruh video player.

Elemen div yang menyertai video Anda harus transparan. Jika penampung div berisi background yang tidak transparan, penampung tersebut akan menumpang tindih video Anda.

SDK memberikan cara untuk mengontrol warna padding di sekitar video Anda, sambil memastikan bahwa penampung div tetap transparan Untuk melakukannya, tetapkan background-color pada elemen isi di CSS Anda. SDK menggunakan nilai ini sebagai warna padding di sekitar video.

body {
  background-color: aliceblue;
}