09

11

Responsive Design: adaptar vídeos

Una de las cosas que nos pueden hacer falta en nuestros Responsive Design es adaptar los vídeos al ancho de la pantalla o del contendedor en el que se encuentra, y para eso tenemos que hacer que se adapte el vídeo sin sobresalir por los lados de la pantalla si lo visualizamos desde un dispositivo móvil.
En otra artículo os contaba como adaptar las imágenes de tu web al Responsive Design y en esta ocasión os explico como adaptar los vídeos a un diseño adaptativo.
Note: podéis comprobar como se adaptan los vídeos haciendo estrecha la ventana del navegador o desde vuestro móvil (y funciona bien en los tres ejemplos de HTML5, YouTube y Vimeo).

Este ejemplo está hecho con HTML5 (podéis ver como se usa) y lo podemos tratar como si fuese un imagen (<img>), pudiendo establecer el ancho o el ancho máximo a nuestro antojo, pero voy a limitarlo a 600px de ancho para que no sea muy grande, pero explicare ambas formas.

1. /* Este es el código del ejemplo con un máximo de 600px de ancho */
   
2. video{
   

width:100%;


max-width:600px;


3. }
   
5. /* Y así se adaptaría al 100% del ancho de página (para webs móviles sería útil) */
   
6. video{
   

width:100%;


7. }
   

Videos externos (de otros servicios)

Cuando queremos pegar un video de Youtube, Vimeo u otro servicio de video nos proporcionan un código, que actualmente suele ser un <iframe>, con el que igualmente podemos hacer que se adapte al ancho de la pantalla y además se adapta al alto.

Para hacer la prueba os pongo dos videos de los dos servicios que he nombrado antes, con este método podemos hacer dos cosas:

• Hacer que se establezca al 100% del contenedor.
• Limitar el ancho al original del vídeo.

Este método es más complejo, ya que tenemos que conseguir varias cosas, primero que se redimensione según la relación del vídeo, y segundo que podamos establecerle un ancho fijo y después se haga más pequeño (esta es la parte compleja, ya que es algo para lo que no hay un método fácil, pero combinando un par de trucos podemos conseguirlo).
Este ejemplo esta dentro de un <div> que contiene ambos vídeos centrándolos y dando un ancho máximo, cada vídeo esta dentro de su contenedor (<div>, que tiene la clase ".contenedor") y es el encargado de generar el tamaño del vídeo (establecemos su padding-top, con la relación de tamaño del vídeo pasada a porcentaje en porcentaje, como veréis en el CSS), posteriormente encima se adapta el video, el código es el siguiente:

1. <div class="delimitador">

<div class="contenedor">

<iframe src="http://www.youtube.com/embed/wMhL_QIyD1k?rel=0"></iframe>

</div>

<div class="contenedor">

<iframe src="http://player.vimeo.com/video/52553020"></iframe>

</div>

2. </div>

1. /* Para tener un ancho máximo debemos de establecer el width del DIV.delimitador */
   
2. .delimitador{
   

width:560px;


margin:auto;


3. }
   
5. /* El contenedor con el padding-top crea el tamaño del vídeo */
   
6. .contenedor{
   

height:0px;


width:100%;


max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */

padding-top:56.25%; /* Relación: 16/9 = 56.25% */

position:relative;


7. }
   
9. /* El iframe se adapta al tamaño del contenedor */
   
10. iframe{
    

position:absolute;


height:100%;


width:100%;


top:0px;


left:0px;


11. }