Video YouTube con características responsive

Uno de los primeros dolores de cabeza al integrar YouTube a un sitio web 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, el paso a paso para lograrlo.

Código de inserción de YouTube

La primera acción es copiar la etiqueta HTML que permite incrustar el video en la página web:

• Ingresar a YouTube.com
• Identificar el video a insertar
• Presionar el botón «Compartir»
• En la sección «Compartir un vínculo», acceder a «Incorporar»

Aquí aparece un panel de configuración donde se puede:

• Indicar en qué minuto – segundo iniciará el video en el sitio web
• Desde «Mostrar los controles del reproductor» se puede habilitar los manejadores de reproducción, pausa, volumen, línea de tiempo, entre otros.
• Habilitar el modo de privacidad mejorada.

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 queda 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 no tiene alto ni ancho, es necesario crear un contenedor que controle estas características.

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 luce 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 utilizado la clase yt-video, pero se puede elegir cualquier otro nombre. Por ejemplo: vimeo-responsive.

Estilos CSS para caja responsive

El último paso es definir las reglas CSS con sus respectivas declaraciones.

La primera afecta 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

Por último, se recomienda insertar un marco que dé una mejor apariencia al reproductor de YouTube.

Este es un nuevo DIV que agrupa el código mencionado y está definido por una regla CSS.

El HTML queda 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 el código a la página HTML y las declaraciones a la respectiva hoja de estilos.

¿Quieres aprender más? Ingresa a la ruta de aprendizaje Quiero ser YouTuber para ampliar tus conocimientos, habilidades y destrezas en el tema.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

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

¿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.

—

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 Internaciona . Basada en una obra en https://e-lexia.com/blog .