Tecnología y Coaching para Emprendedores

Crea un Vídeo Elástico Para un Diseño Web Responsive

video

Si ya has creado tu primer diseño web responsive, seguramente te habrás dado cuenta que no es tan fácil redimensionar las imágenes y vídeos. En este post vamos a ver como crear un vídeo elástico con HTML5; con elástico me refiero a que se adapte de manera dinámica al tamaño del ancho de ventana del navegador.

Antes de nada, te recomiendo que veas la demo.Veremos tres casos: en el primer caso crearemos un vídeo con HTML5, en el segundo usando embedded vídeos de Vimeo o Youtube, y en el tercero crearemos un vídeo elástico con un ancho determinado.

Vídeo elástico con HTML5

Crear un vídeo elástico con HTML5 ideal para diseño web responsive es cosa de niños. En el CSS simplemente tenemos que definir que el ancho será del 100%:
CSS

video {
	max-width: 100%;
	height: auto;
}

Con este simple código, estamos indicando al navegador que utilice el 100% de ancho de pantalla para mostrar el vídeo y que ajuste el alto de manera automática.

Vídeos Embedded

En este caso, importamos un vídeo de Vimeo o Youtube:

HTML


<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Una vez hecho esto, definimos el CSS como sigue:

CSS


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

Vídeo elástico con ancho fijo

En el caso de querer fijar el ancho del vídeo, necesitamos un nuevo div envolvente (wrapper), en el que fijaremos el ancho del vídeo:

CSS

.video-wrapper {
	width: 600px;
	max-width: 100%;
}

HTML

<div class="video-wrapper">
	<div class="video-container">
		<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
	</div>
	<!-- /video -->
</div>
<!-- /video-wrapper -->

Compatibilidad

Estos trucos funcionan en todos los navegadores (comprobado en Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone y iPad)

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • obc

    Buenas!
    justo estaba probando a embeber vídeos de Vimeo en un tema responsive, a partir de un post que encontré ayer, que usa la misma técnica.
    Todo iba bien hasta que lo he probado en un móvil android (2.3) y he visto que el vídeo no aparece. He estado leyendo por ahí que Vimeo ya no se reproduce en Android. No he probado con youtube, pero sí con dailymotion. Dailymotion sí se reproduce en android

    • Emilio Cobos Álvarez

      Vimeo por ahora no usa reproductor HTML5 (como sí lo hace youtube). Por lo tanto necesitarás un Android que tenga flash instalado, y el para flash en android es muy pobre :S.

  • Ana Alcañiz

    Hola Sandra, gracias por compartir conocimientos y esfuerzos… A ver si poco a poco vamos haciendo comunidad y nos dejamos de dar de “cabezazos” cada vez que nos tenemos que pegar con algo :)

    2 cosillas:

    La primera, mi aportación al tema: cómo hacer fluido un vídeo que haga uso de la librería video.js, que considero genial para limar las inconsistencias entre los player nativos de los navegadores (les añade entre otras cosas una interfaz común y la posibilidad de hacer full screen incluso en aquellos navegadores que inicialmente no lo soportan). Ahí va el enlace:
    http://goo.gl/BuwIu

    La segunda es que tengo problemas para visualizar correctamente el contenido HTML de los ejemplos de código del blog. En este artículo se ven cosas ininteligibles del tipo: “&amp;amp;lt;div class=&amp;amp;quot;” ¿¿A tí también te pasa??

    A ves si es algo facilito de resolver. Muchas gracias por todo y un saludo.

    • Sandra

      Hola Ana, he reescrito el código, espero que ahora lo veas bien, gracias por avisar! Estoy totalmente contigo en el tema de crear comunidad, gracias por tu aporte, la verdad es que este blog nace con esta idea, que entre todos hagamos posible el tener un espacio donde ayudarnos a ser mejores diseñadores y desarrolladores web. Un saludo:-)

    • Ana Alcañiz

      Gracias Sandra, todo perfecto ahora. Sólo decir que acabo de ver que ocurre lo mismo con el artículo sobre LESS que publicaste previamente.
      ¡Un saludo!

      • Sandra

        Hola Ana, gracias de nuevo por avisar, al pasar dos veces he indagado a fondo el problema y he encontrado este artículo del Codex de WordPress que lo explica:

        http://codex.wordpress.org/Writing_Code_in_Your_Posts

        Se ve que al editar un post que contiene código, al darle a guardar automáticamente lo transforma.. un rollo! He quitado el post temporalmente, porque editarlo va a ser todo un trabajo y hoy es domingo:-)

        gracias y un saludo!

  • Ana

    Sí, conozco esa sensación… deformación profesional vamos, y en mi caso hacer cuanto antes las cosas básicamente para no olvidarlas… :) Gracias de nuevo.