Konfigurowanie stylu natywnej reklamy wideo

Informacje o opcjach stylu natywnego razem z przykładami znajdziesz w naszej dokumentacji ustawień stylu natywnego.

Przy konfigurowaniu stylu natywnej reklamy wideo odtwarzacz należy umieścić wewnątrz elementu HTML (do wywoływania odtwarzacza należy używać elementu div z makrem #%NATIVE_VIDEO_WRAPPER%#), by zachować współczynnik proporcji odtwarzacza i spróbować zająć jak najwięcej miejsca w obrębie elementu. Z tego względu przy tworzeniu stylu natywnego formatu reklam wideo należy pamiętać o trzech istotnych kwestiach.

1. Należy jednoznacznie określić rozmiar elementu div zawierającego kod natywnej reklamy wideo

Rozmiar elementu div zawierającego makro #%NATIVE_VIDEO_WRAPPER%# musi zostać w pełni określony w CSS – procentowo lub w pikselach.

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

2. Należy umiejętnie dobrać proporcje filmu i elementu div kontenera, by wyeliminować dopełnienie

Jeśli proporcje elementu div kontenera różnią się od proporcji odtwarzacza wideo, wokół obszaru filmu pojawi się dopełnienie. Kolor dopełnienia jest przezroczysty (w aplikacjach mobilnych) lub czarny (na stronach internetowych na urządzenia mobilne i komputery). W tym przykładzie widać element div kontenera o większym stosunku szerokości do wysokości niż w przypadku filmu. Aby utworzyć element div kontenera bez dopełnienia, należy mu nadać proporcje identyczne z filmem. Jeśli współczynnik proporcji filmu jest znany z góry, poniższy kod HTML i CSS zapewni wygenerowanie elementu div idealnie pasującego do filmu.

Przykład: element div o współczynniku proporcji większym od filmu

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. Sposób nakładania się elementów HTML na odtwarzacz wideo

Odtwarzacz wideo zaimplementowany w aplikacjach mobilnych zawsze wyświetla się poniżej innych elementów HTML. Jest to zamierzony efekt, który umożliwia takim elementom jak nagłówek nakładanie się na film.

Ustawienie kolejności nakładania elementów w elemencie div kontenera nie wpływa na ten efekt, a ustawienie koloru tła tego elementu spowoduje przesłanianie przez niego całego odtwarzacza wideo.

Wszystkie elementy div, które otaczają film, muszą być przezroczyste. Jeśli element div kontenera ma nieprzezroczyste tło, będzie nakładać się na film.

Pakiet SDK umożliwia sterowanie kolorem dowolnego dopełnienia filmu, zapewniając zarazem, że element div kontenera pozostanie przezroczysty. Aby to osiągnąć, określ parametr background-color elementu BODY w swoim kodzie CSS. Pakiet SDK użyje tej wartości jako koloru każdego dopełnienia wokół filmu.

body {
  background-color: aliceblue;
}