Video YouTube con características responsive

Uno de los primeros dolores de cabeza al integrar YouTube (también aplica para Vimeo) a un sitio web o blog es lograr que los videos sean responsive, es decir, que estos se adapten correctamente al espacio disponible en pantalla.

Por defecto, las plataformas de video entregan un código de inserción que define un ancho y un alto fijo, lo cual dificulta la presentación del audiovisual en dispositivos móviles, especialmente cuando se inserta en un contenedor que sí es responsive.

Afortunadamente, existe un truco (o hack, si así lo quieres llamar) que exige al código de YouTube adaptarse al espacio, sin afectar la composición del video y la imagen miniatura, y respetar el flujo HTML.

A continuación, comparto el paso a paso para lograrlo.

Código de inserción de YouTube

El primer paso es copiar la etiqueta HTML que permite incrustar el video en la página web. Para ello sigue estos pasos:

• Ingresa a YouTube.com
• Identifica el video que deseas insertar
• Presiona el botón «Compartir»
• En la sección «Compartir un vínculo», accede a «Incorporar»

Aquí te aparece un panel de configuración donde puedes, entre otras:

• Indicar en qué minuto – segundo iniciará el video en tu sitio web
• Habilitar los videos sugeridos al final de la reproducción. Esta opción no la recomiendo, pues es posible que el usuario encuentre videos ajenos a tu marca y se ‘vaya a otro lado’
• Desde «Mostrar los controles del reproductor» puedes indicar si habilitas o no el botón de reproducción / pausa, volumen, línea de tiempo, entre otros. Recomiendo dejar esta opción activada
• Como su nombre lo indica, en «Mostrar el título del video y las acciones del reproductor» se pueden ocultar estas opciones. Mi consejo es dejar esta información visible

Una vez se han configurado estas opciones, solo hace falta copiar la etiqueta IFRAME, que aparece al inicio de este panel.

Limpiar código HTML

El código que se copia de YouTube es similar al siguiente. Obviamente, cambia el ID del video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/mbJ7Dm_b0W4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Como se aprecia, están definidos los parámetros de alto (width="560") y ancho (height="315") fijos. Además, está el parámetro de borde (frameborder="0").

Lo que corresponde a continuación es eliminar estos tres parámetros y sus respectivos valores.

El nuevo código quedaría similar a este:

<iframe src="https://www.youtube.com/embed/mbJ7Dm_b0W4?rel=0"  allow="autoplay; encrypted-media" allowfullscreen></iframe>

Crear un contenedor responsive

Como el recurso de YouTube ya no tiene ni alto no ancho, es necesario crear un contenedor que controle sus proporciones.

Lo anterior se logra definiendo una etiqueta DIV que encierre el IFRAME. Es preciso indicar que el DIV debe llevar una clase CSS que controle las proporciones.

El nuevo código lucirá similar a este:

<div class="yt-video">
    <iframe src="https://www.youtube.com/embed/mbJ7Dm_b0W4?rel=0"  allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Para este ejemplo se ha llamado la clase yt-video, pero puedes elegir cualquier nombre. Por ejemplo: vimeo-responsive.

Estilos CSS para caja responsive

El último paso es definir las reglas CSS con sus respectivas declaraciones. La primera afectará el DIV y la segunda, el IFRAME o similar (de acuerdo con la plataforma).

Las reglas CSS son:

.yt-video {
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}

.yt-video iframe,
.yt-video object,
.yt-video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

¿Necesitas asesoría en YouTube?

Convierte tu canal de YouTube en un activo para tu empresa o proyecto personal. Como Experto de Productos Google para YouTube, estoy dispuesto a ser parte de tu sueño audiovisual.

Conversemos

Un regalo HTML para ti

Por último, acostumbro a insertar un marco que dé una mejor apariencia al reproductor de YouTube. Este es un nuevo DIV que agrupa el código ya mencionado y está definido por una regla CSS.

El HTML quedaría similar a este:

<div class="marco-yt">
    <div class="yt-video">
        <iframe src="https://www.youtube.com/embed/mbJ7Dm_b0W4?rel=0"  allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>

Y la clase CSS marco-yt tendría este código:

.marco-yt {
    background: #1b1b1b;
    border-radius: 8px;
    box-shadow: 2px 2px 10px #999;
    box-sizing: border-box;
    margin: 32px 0 16px 0;
    padding: 16px;
    width: 100%;
}

Lo que resta es llevar todo este código a la página HTML y las declaraciones a la respectiva hoja de estilos.

Espero que este tutorial haya sido de utilidad.

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

Apoya la producción de la Escuela Digital desde PayPal.me

Con una taza de chocolate todo sabe mejor ¿Nos invitas a una?

¡Vamos por los 20.000 suscriptores en YouTube! Suscríbete

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Video YouTube con características responsive por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.