Insertar Videos Responsivos en Portadas y Plantillas

En esta ayuda, se explica cómo insertar un video en el layout de portadas o plantillas de notas y secciones del sitio, utilizando un contenedor que se ajusta automáticamente al tamaño del video, ocupando el 100% del espacio disponible. 

Pasos a seguir:

1. Dese Mediakit, crear un Adserver llamado "Videos Responsivos"

Para empezar, es necesario crear un Adserver dentro del CMS y agregar el siguiente código en la sección TAG HEAD:

<style>

  .container-video {

    position: relative;

    padding-bottom: 56.25%; /* Proporción 16:9 */

    height: 0;

    overflow: hidden;

  }

  .container-video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

  }

</style>

Este código CSS asegura que el contenedor del video mantenga una proporción de 16:9 y que el video ocupe el 100% del espacio del contenedor.

2. Crear una Zona Asociada al Adserver

Una vez creado el Adserver, se debe crear una zona y asociarla al Adserver creado. Luego, insertar el siguiente código HTML en la zona:

<div class="container-video">

  <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

</div>

Se debe reemplazar VIDEO_ID por el ID del video a mostrar que es el codigo alfanumerico que esta despues de la v en el link:  https://www.youtube.com/watch?v=IscGtF_A14A

Entonces en este caso de ejemplo el codigo de la zona quedaria asi: 

<div class="container-video">

  <iframe src="https://www.youtube.com/embed/IscGtF_A14A" allowfullscreen></iframe>

</div>

3. Insertar la Zona en el Layout

Finalmente, insertar la zona creada en el layout donde se desea mostrar el video. El video se ajustará automáticamente para ocupar el 100% del ancho del contenedor, manteniendo la proporción 16:9.

Compatibilidad de Navegadores

Este método es compatible con todos los navegadores modernos. Sin embargo, se recomienda probar la visualización en diferentes dispositivos y navegadores para asegurarse de que se muestra correctamente.