Konfigurace stylu nativní videoreklamy

Další informace o možnostech nativních stylů najdete v dokumentaci k nastavení nativních stylů, kde jsou k dispozici také příklady.

Při nastavování stylu pro nativní videoreklamu byste přehrávač videa měli umístit do prvku HTML (div s makrem #%NATIVE_VIDEO_WRAPPER%# spustí přehrávač). Bude tak možné zachovat poměr stran přehrávače a zabrat v prvku co nejvíce místa. Při úpravách stylu formátu nativních videoreklam je proto třeba pamatovat na tři důležité body.

1. Explicitně uveďte velikost prvku div, který obsahuje obálku nativní videoreklamy

Velikost prvku div, který obsahuje makro #%NATIVE_VIDEO_WRAPPER%#, musí být ve stylu CSS jasně uvedena – pomocí procenta nebo pixelů.

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

2. Pamatujte na poměr videoreklamy a kontejneru div a vyhněte se odsazení

Pokud je poměr stran kontejneru div jiný než poměr stran přehrávače videa, okolo videoreklamy se bude zobrazovat odsazení. Odsazení je průhledné (mobilní aplikace) nebo černé (web pro mobily a počítače). Na příkladu vidíte kontejner div s větším poměrem šířky k výšce, než jaký má videoreklama. Chcete-li vytvořit kontejner div bez odsazení, musí mít stejný poměr stran jako videoreklama. Pokud je poměr stran videoreklamy znám předem, lze použít následující styly HTML a CSS, které vykreslí kontejner div přesně odpovídající videu.

Příklad: Poměr stran kontejneru div větší než 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. Seznamte se s tím, jak prvky HTML překrývají přehrávač videa

Přehrávač videa implementovaný v mobilních aplikacích se vždy vykresluje pod ostatními prvky HTML. Toto chování je záměrné a umožňuje překrytí videa jinými prvky, např. nadpisem.

Nastavení Z-indexu pro kontejner div na toto chování nemá vliv. Nastavení barvy pozadí kontejneru div způsobí, že prvek div zakryje celý přehrávač videa.

Prvky div, ve kterých je videoreklama zabalena, musí být vždy průhledné. Pokud kontejner div obsahuje jiné než průhledné pozadí, toto pozadí videoreklamu překryje.

Je vhodné použít sadu SDK, pomocí níž budete moci nastavit barvu odsazení okolo videoreklamy a zajistíte, že kontejner div zůstane průhledný. Ve stylech CSS nastavte parametr background-color pro prvek body. Sada SDK jeho hodnotu použije jako barvu případného odsazení okolo videoreklamy.

body {
  background-color: aliceblue;
}