Videos en Portada

Insertar Videos Responsivos de Cualquier Plataforma (YouTube, Vimeo, Twitch, etc.)

En esta ayuda, se explica cómo insertar un video de cualquier plataforma 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. Crear un Adserver y Definir el Estilo del Contenedor

Para empezar, es necesario crear un Adserver en tu CMS (por ejemplo, llamado "Videos Responsivos") y agregar el siguiente código CSS en la sección TAG HEAD. Este código solo necesitas agregarlo una vez en tu sitio.

HTML

<style>

  .container-video {

    position: relative;

    padding-bottom: 56.25%; /* Proporción 16:9, para otros aspect ratios, ajustar este valor */

    height: 0;

    overflow: hidden;

  }

  .container-video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

  }

</style>

Este código CSS es el responsable de que el video sea responsivo, manteniendo siempre una proporción de 16:9.

2. Crear una Zona y Obtener el Código para Incrustar (Embed)

Una vez creado el Adserver, debes crear una zona asociada a él. Dentro de esa zona, usarás la siguiente estructura HTML. El paso clave es obtener el código <iframe> que te proporciona la plataforma de video.

Instrucciones generales:

1. Ve a la página del video que quieres insertar (en YouTube, Vimeo, Twitch, DailyMotion, etc.).

2. Busca el botón "Compartir" (Share).

3. Dentro de las opciones para compartir, selecciona "Insertar", "Incrustar" o "Embed" (el nombre puede variar).

4. La plataforma te mostrará un código que empieza con <iframe>...</iframe>. Copia ese código completo.

5. Pega el código <iframe> que copiaste dentro del <div> que se muestra a continuación, en la zona de tu Adserver:

HTML:
<div class="container-video">
[codigo iframe]
</div>

Ejemplos Prácticos:

• Ejemplo con YouTube: El código que YouTube proporciona se ve así: <iframe width="560" height="315" src="https://www.youtube.com/embed/IscGtF_A14A" ...></iframe> Lo pegarías en tu zona de la siguiente manera:

HTML:
<div class="container-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/IscGtF_A14A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

• Ejemplo con Vimeo: El código de Vimeo tiene un formato similar: <iframe src="https://player.vimeo.com/video/123456789" width="640" height="360" ...></iframe> Lo insertarías así:

HTML:
<div class="container-video">
<iframe src="https://player.vimeo.com/video/123456789" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

• Ejemplo con Twitch (Caso Especial): Twitch requiere un parámetro extra (parent=) con el dominio de tu sitio. <iframe src="https://player.twitch.tv/?video=v123456&parent=TU_DOMINIO.com" ...></iframe> Lo insertarías así, reemplazando TU_DOMINIO.com con tu propio dominio:

HTML:
<div class="container-video">
<iframe src="https://player.twitch.tv/?video=v123456&parent=TU_DOMINIO.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
</div>

3. Insertar la Zona en el Layout

Finalmente, inserta la zona que acabas de crear en el layout donde deseas mostrar el video. El contenedor div y el CSS se encargarán de que el video se ajuste automáticamente para ocupar el 100% del ancho disponible, manteniendo la proporción correcta.

Compatibilidad de Navegadores

Este método es el estándar de la industria y es compatible con todos los navegadores modernos. Siempre se recomienda hacer una prueba rápida en diferentes dispositivos para asegurar la correcta visualización.