';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo hacer responsive los vídeos de YouTube

Para escalar y adaptar un vídeo de YouTube a cualquier navegador o dispositivo móvil y así conseguir un diseño responsive, se puede utilizar CSS o Javascript. En el ejemplo que veremos a continuación utilizaremos CSS para lograrlo.

La gran mayoría de páginas web suelen insertar vídeos de YouTube o Vimeo. Son una pieza fundamental dentro del diseño de un sitio web y por lo tanto debemos hacer que se vea de forma correcta en cualquier dispositivo.

Cómo insertar un vídeo de YouTube en una página web

Lo primero de todo, es conseguir el código iframe del vídeo que queremos insertar en nuestra página web. Para ello iremos a YouTube y debajo de nuestro vídeo hacemos clic en Compartir > Insertar y nos aparecerá el código, lo copiamos para pegarlo más tarde en nuestro sitio web.

En el lugar de nuestra web donde queramos que se visualice el vídeo, creamos un contenedor div alrededor del código iframe con la clase video-container.

<div class="video-container"><iframe.......></iframe></div>

Hacer responsive un vídeo de YouTube

Para hacer responsive el vídeo, debemos añadir un poco de CSS en nuestra hoja de estilos. La primera declaración CSS se dirige al contenedor del vídeo y la segunda a lo que está dentro, en este caso, el iframe, también se puede aplicar esto a objetos e incrustar elementos.

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

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

Podéis personalizarlo a vuestro gusto. En esta web cuando pongo un vídeo retoco la anchura, la altura y los padding pero para dispositivos móviles lo vuelvo a dejar al 100% tanto la anchura como la altura y el padding-bottom en porcentaje.

A continuación podéis ver un ejemplo donde hemos insertado un vídeo y utilizado el anterior código. Si estrecháis o reducís manualmente la pantalla, veréis como el vídeo se adapta al nuevo tamaño de la pantalla.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Compartir
Paco (Iborra Web Design)

Artículos destacados

Hay 7 comentarios en este artículo
  1. Carlos
    8 julio 2020, 17:44

    Para los usuarios de WordPress que tengan acceso al functions.php, generar esa capa “video-container” de forma automática es muy fácil. Luego solo quedaría añadir las css del artículo.

    function cmmyth_embed_html( $html )
    {
    return '<div class="video-container">' . $html . '</div>';
    }
    add_filter( 'embed_oembed_html', 'cmmyth_embed_html', 10, 3 );
    add_filter( 'video_embed_html', 'cmmyth_embed_html' );
    
    • Paco (Iborra Web Design)
      8 julio 2020, 18:00

      Hola Carlos,

      Genial tu aportación! Muchas gracias por compartir.

      Saludos.

      • Carlos
        8 julio 2020, 20:59

        Paco, un verdadero placer!

  2. Guillermo
    6 julio 2020, 14:37

    Correcto! Es casi idéntico que la propuesta del equipo de WordPress Advanced Custom Fields que yo uso, como no es idéntico os paso la referencia (por el height:auto del div principal).

    Saludos!

    • Paco (Iborra Web Design)
      6 julio 2020, 20:28

      Hola Guillermo,

      Gracias por participar y aportar nuevas ideas.

      Un saludo.

  3. Juan Manuel
    3 julio 2020, 11:14

    El diseño responsive es algo que está a la orden del día, sin duda, así que gracias por el artículo Paco. Como todos los que llevan ejemplos con código, lo añado a mis favoritos. Un cordial saludo.

    • Paco (Iborra Web Design)
      3 julio 2020, 19:25

      Gracias Juan Manuel por comentar!

      Saludos.

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp