Embedded Files
Insertar Videos Responsivos de Cualquier Plataforma (YouTube, Vimeo, Twitch, etc.)
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:
Ve a la página del video que quieres insertar (en YouTube, Vimeo, Twitch, DailyMotion, etc.).
Busca el botón "Compartir" (Share).
Dentro de las opciones para compartir, selecciona "Insertar", "Incrustar" o "Embed" (el nombre puede variar).
La plataforma te mostrará un código que empieza con <iframe>...</iframe>. Copia ese código completo.
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.
Page updated
Report abuse