Responsive web design y vídeos

Ya conocemos las muchas ventajas que nos aporta diseñar nuestros sitios web siguiendo la filosofía Responsive Web Design de cara al SEO y a la facilidad de gestionar versiones para diferentes dispositivos móviles.

En el trabajo de maquetar nuestros proyectos nos podemos topar con los vídeos, que pueden darnos problemas a la hora de que el diseño sea fluido al 100%. Si tenemos problemas con videos de YouTube o insertados directamente en nuestro servidor, veremos como solucionar este problema fácilmente.

Vídeos con etiquetas HTML5
Si insertamos videos con la etiqueta video y queremos que sean totalemnte flexibles debemos definir lo siguiente en nuestro CSS:


/*Videos en HTML5*/
video {
max-width: 100%;
height: auto;
}

Videos insertados tipo iframe (Youtube, Vimeo, etc)
Para los videos de este tipo también es muy sencillo darle solución para que sean elásticos. Debemos definir el «CSS» y que el iframe este contenido dentro de un «div» tal como veremos a continuación.

CSS

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

HTML

Puedes verlo en acción en este artículo de HGR Design.

Así que si los vídeos te traían de cabeza en tu proyecto responsive espero que este post te haya podido ayudar.

Publicaciones Similares

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Helmer Galvis Rojas.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

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