• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo hacer para que los vídeos de YouTube sean responsive

youtube-responsive

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 para lograrlo.

En el ejemplo que veremos a continuación utilizaremos una solución CSS, donde será necesario agregar un par de estilos en el archivo principal.

La gran mayoría de páginas web suelen insertar vídeos de YouTube o Vimeo para distintos objetivos. 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 ordenador, tablet o smartphone.

Vamos a explicar la forma de hacerlo si utilizamos vídeos de YouTube. Al final del tutorial dejaré un enlace donde se muestran más ejemplos con otros reproductores, como Vimeo, donde existe una solución Javascript.

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. Pongo una imagen como ejemplo.

Ahora creamos un contenedor div alrededor del código iframe con la clase video-container.

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

Por último 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. Podéis personalizarlo a vuestro gusto.

.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%;
}

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.

En el apartado de enlaces y fuentes os dejo la guía de donde he sacado el código y donde se muestra otros ejemplos para hacer responsive reproductores de vídeos diferentes.

Estoy seguro que este código os ayudará para adpatar vuestros vídeos a todos las resoluciones de pantalla. Espero que os sea útil.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (7)

  • foto hombre
    Juan Manuel Responder

    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.

    23 de Febrero 2017 a las 11:14h
    • foto blog
      Paco (Iborra Web Design) Responder

      Gracias Juan Manuel por comentar!

      Saludos.

      23 de Febrero 2017 a las 19:25h
  • foto hombre
    Guillermo Responder

    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!

    Fuente: Advanced Custom Fields

    26 de Febrero 2017 a las 18:37h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Guillermo,

      Gracias por participar y aportar nuevas ideas.

      Un saludo.

      28 de Febrero 2017 a las 20:28h
  • foto hombre
    Carlos Responder

    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' );
    

    27 de Febrero 2017 a las 20:44h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Carlos,

      Genial tu aportación! Muchas gracias por compartir.

      Saludos.

      28 de Febrero 2017 a las 20:35h
    • foto blog
      Carlos Responder

      Paco, un verdadero placer :-)

      28 de Febrero 2017 a las 21:59h

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code