Configurar o estilo de vídeo nativo

Saiba mais sobre as opções de estilos nativos e veja exemplos na nossa documentação Configurações de estilo nativo.

Quando você define o estilo para um anúncio em vídeo nativo, o player de vídeo deve ser colocado em um elemento HTML (um div com a macro #%NATIVE_VIDEO_WRAPPER%# aciona o player) para manter a proporção do player e tentar ocupar o máximo de espaço dentro do elemento possível. Por causa disso, há três pontos importantes a serem lembrados ao estilizar o formato de vídeo nativo.

1. Especificar explicitamente o tamanho do div que contém o wrapper de vídeo nativo

O tamanho do div que contém a macro #%NATIVE_VIDEO_WRAPPER%# precisa ser totalmente especificado com CSS, seja com uma porcentagem ou pixels.

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

2. Verificar a proporção div do vídeo e do contêiner para evitar o preenchimento

Se a proporção do div do contêiner é diferente da proporção do player de vídeo, aparece o preenchimento em torno do vídeo. A cor do preenchimento é transparente (aplicativos para dispositivos móveis) ou preto (Web para dispositivos móveis e desktop). O exemplo ilustra um div de contêiner com uma proporção largura:altura maior do que o vídeo. Para criar um div de contêiner sem preenchimento, ele precisa ter a mesma proporção do vídeo. Se a proporção do vídeo é conhecida antecipadamente, os seguintes HTML e CSS funcionam bem na renderização de um div que se encaixa ao vídeo perfeitamente.

Exemplo: a proporção do div é maior do que a do vídeo

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. Compreender como elementos HTML se sobrepõem ao player de vídeo

O player de vídeo implementado em aplicativos para dispositivos móveis sempre é renderizado após outros elementos HTML. Esse comportamento é intencional e permite que elementos, como um título, seja sobreposto ao seu vídeo.

Definir o z-index no recipiente div não tem efeito nesse comportamento, e definir a cor do fundo do div do contêiner fará com que o div cubra todo o player de vídeo.

Os elementos div que envolvem seu vídeo precisam ser transparentes. Se um div do contêiner contém um fundo que não é transparente, ele se sobrepõe ao seu vídeo.

O SDK fornece uma maneira de controlar a cor dos preenchimentos em volta do seu vídeo, garantindo que o div do contêiner permaneça transparente. Para fazer isso, defina background-color no elemento do corpo no seu CSS. O SDK usa esse valor como a cor dos preenchimentos em volta do vídeo.

body {
  background-color: aliceblue;
}