Native videostijl configureren

Kom meer te weten over native stijlopties en bekijk voorbeelden in onze documentatie over instellingen voor native stijlen.

Wanneer u de stijl voor een native videoadvertentie instelt, moet de videospeler binnen een html-element worden geplaatst (een div met de macro #%NATIVE_VIDEO_WRAPPER%# activeert de speler) om zo de beeldverhouding van de speler te behouden en een poging te doen zo veel mogelijk van de ruimte binnen het element te vullen. Er zijn om die reden drie belangrijke zaken waarmee u rekening moet houden wanneer u de native video-indeling gebruikt.

1. Geef expliciet het formaat op van de div die de native videowrapper bevat

Het formaat van de div die de #%NATIVE_VIDEO_WRAPPER%#-macro bevat, moet volledig met css worden opgegeven als percentage of pixels.

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

2. Houd rekening met de verhoudingen van de video- en container-div om opvulling te voorkomen

Als de verhouding van de container-div verschilt van de verhouding van de videospeler, verschijnt er opvulling rond de video. De kleur van de opvulling is transparant (mobiele app) of zwart (mobiel en internet voor desktop). Het voorbeeld toont een container-div met een grotere breedte:hoogte-verhouding dan de video. Als u een container-div zonder opvulling wilt maken, moet deze dezelfde verhouding hebben als de video. Als de beeldverhouding van de video van tevoren bekend is, werkt de volgende html en css goed om een div te genereren die volledig aansluit op de video.

Voorbeeld: div-verhouding is groter dan 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. Krijg inzicht in hoe html-elementen uw videospeler overlappen

De videospeler die in mobiele apps is geïmplementeerd, wordt altijd onder andere html-elementen weergegeven. Dit gebeurt opzettelijk en maakt het mogelijk dat elementen, zoals een kop, als overlay over de video kunnen worden geplaatst.

De Z-index in de container-div instellen heeft geen invloed op dit gedrag. Als u de achtergrondkleur van de container-div instelt, wordt de volledige videospeler door de div bedekt.

Alle div-elementen die de video verpakken, moeten transparant zijn. Als een container-div een achtergrond bevat die niet transparant is, wordt u video hierdoor bedekt.

De SDK biedt een manier om de kleur van opvulling rond uw video te beheren, terwijl ervoor wordt gezorgd dat de div transparant blijft. Als u dit wilt doen, stelt u de background-color in het body-element in uw css in. De SDK gebruikt deze waarde als de kleur voor opvulling rond de video.

body {
  background-color: aliceblue;
}