Cómo saber cuando una web es Responsive

Una Web responsive o el denominado "Responsive Web Design" o RWD es una técnica de diseño y desarrollo de páginas y aplicaciones Web que permite que éstas se adapten al tamaño, orientación y la resolución y de la pantalla; lo que equivale a decir que se adaptan eficazmente al dispositivo de los usuarios. Se consigue mediante un código único, una única página, una única URL.

¿Cómo sabes si una Web es responsive?

No es necesario visualizar una Web en diferentes dispositivos para comprobar si es responsive o no. Tan solo necesitas visualizarla desde tu escritorio y redimensionar la pantalla del navegador. Según vayas variando el tamaño de la pantalla, comprobarás, o no, que el diseño, el contenido y las imágenes se reconfiguran automáticamente.<br><br>

Otra opción válida es cambiar la resolución de pantalla: Selecciona una resolución baja y comprobarás la visualización de la Web para esa resolución. ¿Funciona? Ya sabes si una Web es responsive o no, por si continuas teniendo dudas, aquí tienes un ejemplo de  sitio “responsive”, en este caso esta totalmente optimizado y se adapta a cualquier navegador, resolución de pantalla,etc...

Ahora pasemos a ver cómo adaptar un vídeo en una Web responsiva

Primero de todo, hay que diferenciar dos tipo de vídeos: HTML5 y los de los servicios externos: Youtube, Vimeo, etc.... Donde son <iframe> y tendremos que incrustarlo.

Vídeo HTML5

Para estos no hay ninguna complicación, es como utilizar un elemento <img>.

Si tenemos que adaptar el vídeo al ancho total de la pantalla, haríamos:

video {

width:100%;

}

Ya contamos con el tamaño máximo que y cuando no se pueda adaptar a la página por cambio de dispositivo o tamaño, se hará automáticamente más pequeño:

img {

width:100%;

max-width:640px;

}

Servicios externos

Trabajando con vídeos con etiquetas <iframe> se complica la adaptación. Para ello hay que hacer un proceso algo complejo.

Contamos con 2 opciones:

1- El vídeo se adapta al ancho del contenedor (el estándar es de 640 píxeles).

2- Limitamos el ancho a uno concreto.

A continuación:

Redimensionamos el contenedor del vídeo para que conserve el ratio- relación entre el alto y el ancho-.<br>

Hacemos:

Introducimos <iframe> dentro de una etiqueta <div> con alto 0px y ancho 100%, y usamos un truquillo para que cuente con el tamaño del vídeo padding-top y establecemos el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:

Dividimos el alto entre el ancho y el padding-top se adaptará según esta relación al ancho:<br><br>

16:9--->9/16*100 = 56,25%

4:3--->3/4*100 = 75%

Ya lo tenemos listo para la etiqueta <div y con ella nos aseguramos que se va a adaptar para tener el ratio adecuado, ahora hacemos que el <iframe> flote sobre la etiqueta anterior y se adopte a su alto y ancho (alto y ancho: 100% y posición: absolute).

Como último paso si no queremos que el vídeo ocupe el 100% del ancho de la página o contenedor), lo delimitaremos con otra nueva etiqueta <div> que contarán el ancho máximo que necesitamos.