Logo de YouTube

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 apoyo en tu proyecto web? Contáctame

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éntame en los comentarios. Además, si quieres que escriba sobre algún tema, anótalo a continuación para agregarlo a la agenda de contenidos.

Logo NequiTu aporte permite crear contenidos. Envía un aporte Nequi

Logo PayPalHay más posibilidades. Apoya el blog desde PayPal.me

Logo YouTube¡Vamos por los 10.000 suscriptores en YouTube! Suscríbete

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

Licencia Creative Commons 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.

2 respuestas a «Video YouTube con características responsive»

  1. Estimado Juan Carlos, muchas gracias por compartir sus conocimientos de forma incondicional.

    Le felicito por la forma tan clara y fácil de orientar a quienes le visitan.

    Agradecería infinitamente, si esta en sus posibilidades, facilitarme un código html, para insertar solamente el audio en mi página web y que arranque de forma automática; pues el que utilizaba antes no funciona más. Esta situación se ha presentado después que Google habilitó el autoplay.

    Tengo más de un mes visitando muchas páginas, en donde se supone tienen la solución a este problema, sin embargo hasta el día de hoy no he tenido éxito alguno.

    Pertenezco a dos comunidades de poetas, en donde todos gustamos de acompañar nuestras letras con música de fondo, por lo que sería a muchos a quienes nos estaría apoyando. La comunidades se llaman «El Desván del Poeta» y «Castillo Mágico de Poetas»….y ambas son Ning.

    Me despido, no sin antes agradecer por la atención al presente mensaje.

    Dios le bendiga!

    Silvia Regina Cossío Cámara

    1. Hola, Silvia. Espero que estés muy bien. Y gracias por el comentario.

      Me alegra mucho que mi blog sea de utilidad. Esa es la idea.

      Sobre tu inquietud te cuento que puedes utilizar la etiqueta AUDIO. Es fácil de utilizar y te permite insertar recursos sonoros en una página web.

      Para que inicie el sonido automáticamente solo hace falta agregar el parámetro AUTOPLAY.

      Los formatos de audio que acepta esta etiqueta son MP3 y OGG, por lo que debes asegurar que tu recurso cumple con esta condición.

      Supongamos que tu audio se llama CANCION.MP3. Así, el código sería similar a este:

      <audio controls autoplay>
      <source src="cancion.mp3" type="audio/mpeg">
      </audio>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.