Configurar el estilo de vídeo nativo

Descubra las opciones de estilo nativas y consulte ejemplos en nuestra documentación sobre la configuración de los estilos nativos.

Al configurar el estilo de un anuncio de vídeo nativo, el reproductor debe colocarse dentro de un elemento HTML div con una macro #%NATIVE_VIDEO_WRAPPER%# que lo ejecute para que se mantenga la relación de aspecto del reproductor y se intente ocupar la mayor cantidad de espacio posible del elemento. Debido a esto, hay tres puntos importantes que se deben recordar al aplicar estilos al formato de vídeo nativo.

1. Especificar explícitamente el tamaño del div que contiene el contenedor del vídeo nativo

El tamaño del div que contiene la macro #%NATIVE_VIDEO_WRAPPER%# debe especificarse completamente con CSS, ya sea mediante un porcentaje o mediante píxeles.

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

2. Sea consciente de las relaciones del div del vídeo y del contenedor para evitar espacio interno

Si la relación del div del contenedor es diferente de la relación del reproductor de vídeo, aparece un espacio interno alrededor del vídeo. El color del espacio es transparente (en las aplicaciones móviles) o negro (en la Web para ordenadores y para móviles). El ejemplo ilustra un div contenedor con una relación ancho:alto superior a la del vídeo. Para crear un div contenedor sin espacio, debe tener la misma relación que el vídeo. Si se conoce de antemano la relación de aspecto del vídeo, la siguiente cadena HTML y CSS funciona bien para generar un div que se ajuste perfectamente al vídeo.

Ejemplo: relación del div mayor que la del 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. Comprender cómo se superponen los elementos HTML en el reproductor de vídeo

El reproductor de vídeo implementado en las aplicaciones móviles siempre se muestra por debajo de los demás elementos HTML. Este comportamiento es intencionado y permite que elementos tales como un título se superpongan a su vídeo.

Definir el índice Z en el div contenedor no tiene ningún efecto en este comportamiento, y definir el color de fondo del div contenedor hará que el div cubra todo el reproductor de vídeo.

Los elementos div que contengan su vídeo deben ser transparentes. Si un div contenedor tiene un fondo que no es transparente, se superpondrá al vídeo.

El SDK proporciona una manera de controlar el color de cualquier espacio alrededor del vídeo y asegura al mismo tiempo que el div contenedor se mantiene transparente. Para ello, defina el parámetro background-color en el elemento del cuerpo en su CSS. El SDK utiliza este valor como color de cualquier espacio alrededor del vídeo.

body {
  background-color: aliceblue;
}