Cómo configurar un estilo de video nativo

Obtenga más información sobre las opciones de estilo nativo y consulte los ejemplos en nuestro artículo sobre configuración de estilo nativo.

Cuando configura el estilo de un anuncio de video nativo, el reproductor debe colocarse dentro de un elemento HTML (un div con la macro #%NATIVE_VIDEO_WRAPPER%# activa el reproductor) a fin de conservar la relación de aspecto del reproductor y ocupar la mayor parte posible del espacio que hay dentro del elemento. Por este motivo, debe tener en cuenta tres puntos importantes al momento de asignar un estilo al formato de video nativo.

1. Especifique de forma explícita el tamaño del div que contiene el wrapper del video nativo

El tamaño del div que contiene la macro #%NATIVE_VIDEO_WRAPPER%# debe estar claramente especificado con CSS mediante un porcentaje o píxeles.

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

2. Tenga presentes las proporciones del contenedor div y el video para evitar el relleno

Si la proporción del contenedor div es diferente de la del reproductor, aparecerá el relleno alrededor del video. El relleno es transparente en las aplicaciones para dispositivos móviles o negro en Web móvil o para computadoras. En el ejemplo, se puede apreciar un contenedor div con una proporción ancho:alto mayor que la del video. Para que no se aparezca el relleno en el contenedor div, debe tener la misma proporción que el video. Si conoce la relación de aspecto del video con anterioridad, los siguientes HTML y CSS sirven para dibujar un div donde el video encaja perfectamente.

Ejemplo: La proporción del div es mayor que la del 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. Comprenda cómo se superponen los elementos HTML en su reproductor de video

El reproductor de video implementado en las aplicaciones para dispositivos móviles siempre envía dibujos detrás de otros elementos HTML. Este comportamiento es intencional y permite que los elementos, como un título, se superpongan al video.

Si configura el z-index en el contenedor div, no se afectará este comportamiento, y configurar el color del fondo del contenedor div hará que el div cubra completamente el reproductor de video.

Los elementos div que rodean el video deben ser transparentes. Si un contenedor div tiene un fondo transparente, se superpondrá al video.

El SDK permite controlar el color del relleno que aparece alrededor del video y asegurarse de que el contenedor div sea transparente. Para ello, configure el background-color del elemento del cuerpo en su CSS. El SDK usa este valor como el color del relleno que puede aparecer alrededor del video.

body {
  background-color: aliceblue;
}