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 |
Exemplo: a proporção do div é maior do que a do vídeo |
<div class="video-ratio-wrapper"> <div class="video"> #%NATIVE_VIDEO_WRAPPER%# </div> </div>
.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; }