Cuando toma la ruta del diseño web receptivo, parte del trato son las cuadrículas fluidas. Es decir, elementos de contenedor establecidos en anchos porcentuales. Solo un ejemplo: un <article> que contiene una publicación de blog puede tener 320 px de ancho en un dispositivo de pantalla pequeña y 690 px de ancho en una pantalla grande. El texto se puede cambiar de tamaño y fluirá muy bien para llenar un contenedor. Eso no es demasiado difícil. Pero los medios (imágenes, reproductores de video y reproductores de audio) exigen un poco más de atención (por ejemplo, un video que sobresale del borde de la pantalla == malo). Esta publicación es para resumir los métodos para manejar eso.
Imágenes flexibles
Si se siente cómodo con el soporte de IE 7 y versiones posteriores. Esta pequeña belleza te hará bien:
img {
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
}Si le preocupa la compatibilidad con IE 7 (espero que no, pero entiendo que hay escenarios en los que debe hacerlo), use esto para asegurarse de que las imágenes sobrevivan a la reducción:
img {
-ms-interpolation-mode: bicubic;
}Consulte aquí para obtener más información al respecto.
Si necesita preocuparse por IE 6 (de nuevo…) este artículo de Ethan Marcotte tiene una solución de JavaScript. Es una especie de fastidio cargar JavaScript adicional para un navegador que ya es mucho más lento, pero c’est la vie.
Un cambio de pensamiento
Hubo un tiempo en el que cambiar el tamaño de las imágenes era un tabú. Los navegadores apestaban a la hora de cambiar el tamaño de las imágenes y se desperdiciaba ancho de banda. Esa actitud casi se ha ido ahora, principalmente porque los navegadores ahora son bastante buenos para cambiar el tamaño de las imágenes y hacer que se vean bien. De hecho, ahora que la visualización de la “retina” se está convirtiendo en una cosa, mostrar imágenes demasiado grandes para un contenedor es algo bueno, porque reducirlas hace que se vean más nítidas.
Sin embargo, la cuestión del ancho de banda sigue siendo un (gran) problema. Que es lo que hace que las imágenes receptivas sean un tema tan candente en este momento. El punto es: cuando piense en imágenes flexibles, trabaje en pensar también en imágenes receptivas. Puede leer más sobre las soluciones actuales para eso aquí.
Video flexible
El video flexible es un poco más complejo que las imágenes. Si está utilizando HTML5 <video> directamente, la buena noticia es que mantiene su relación de aspecto al igual que las imágenes, por lo que la misma técnica se mantiene:
video {
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
}Sin embargo, empiezo a pensar que es una muy mala idea usar HTML5 <video> directamente. Los formatos requeridos han ido cambiando durante años y aún no ha terminado. Agregue a eso el hecho de que 1) el alojamiento de videos requiere un uso intensivo del ancho de banda y es costoso 2) la transmisión es otra bestia completamente complicada 3) mantener la calidad adecuada en todos los formatos y dispositivos y el ancho de banda disponible es difícil y 4) controlar los controles consistentes en el reproductor es difícil y … bueno … al diablo usando video HTML5 directamente.
En cambio, recomiendo usar un servicio de video como YouTube o Vimeo. Cuando inserta videos de estos servicios, inserta un <iframe>. Lo que viene dentro del iframe puede ser un video HTML5, pero no tiene que lidiar con él directamente.
Todo eso para decir: <iframe>s tienen un problema de relación de aspecto.
Thierry Koblentz resolvió este problema hace años en su artículo de A List Apart Creación de proporciones intrínsecas para video.
La idea básica es que cree un div de envoltura de video con altura cero y un relleno superior establecido en porcentajes. Ese porcentaje será en realidad un porcentaje del ancho, por lo que mantendrá la relación de aspecto. Luego colocas absolutamente el video en el interior, lo que te da esa habilidad elusiva para mantener la relación de aspecto. Estaríamos apuntando al iframe para la posición absoluta, ya que nuevamente, el video no necesita esto, pero los iframes sí lo necesitan. Los basicos:
.video-wrapper {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
}
.video-wrapper iframe {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}Consulte el artículo sobre eso para obtener más matices y detalles sobre la compatibilidad con navegadores anteriores. También cubro todo esto e incluyo algunas soluciones de JavaScript caseras (con demostraciones) en mi artículo de .net mag Create Fluid Width Videos.
Suficiente complejidad, entra en simplicidad
Si está utilizando jQuery y ya ha tenido suficientes complicaciones en torno al tema del video de ancho flexible, lo invito a probar FitVids.js. Fui coautor de este pequeño complemento de jQuery con Dave Rupert para abordar específicamente este problema. Utiliza exactamente los mismos conceptos explicados anteriormente, solo que lo hace automáticamente. Eso significa 1) sin envoltorios no semánticos en su marcado de autor 2) relaciones de aspecto que coinciden con el video individual (no todos los videos son iguales).
FitVids.js funciona de inmediato con todos los reproductores de video principales y es muy fácil de extender para trabajar con cualquier reproductor.
¿Estás usando Sublime Video?
Tengo un tutorial sobre cómo hacer que el ancho de su reproductor sea fluido.
¿Utiliza MediaElements.js?
MediaElements.js es un reproductor de video HTML5 muy bueno que alivia algunos de los problemas que mencioné anteriormente con el video HTML5. Es decir, proporciona una apariencia de jugador agradable y consistente y tiene la capacidad de recurrir a tecnologías más antiguas para reproducir videos, como Flash y Silverlight. No es una bala de plata total, ya que no te salva de las guerras de plataformas en dispositivos móviles (que generalmente no tienen Flash o Silverlight) ni te ayuda con problemas de transmisión o calidad, pero aún así es bueno.
Hay muchas cosas de cálculo de píxeles fijos en MediaElements.js, pero he podido forzarlo a tener un ancho fluido en el pasado con algunas modificaciones importantes:
.mejs-container {
width: 100% !important;
height: auto !important;
padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
width: 100% !important;
height: 100% !important;
}
.mejs-mediaelement video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
}¿Vídeo adaptable?
¿Recuerda que las imágenes receptivas son un tema candente porque estamos tratando de ser responsables y no mostrar imágenes que son innecesariamente grandes? El video tiene el mismo problema solo agravado por… uhm… tantos fotogramas como hay en todo el video (probablemente muchos).
Una solución medio tonta es servir diferentes fuentes de video según el ancho de la ventana del navegador. Tengo un tutorial sobre eso aquí.
Otra solución es usar atributos de medios en las fuentes de video y solo esperar que el soporte mejore y no se elimine.
<video controls>
<source src="https://css-tricks.com/rundown-of-handling-flexible-media/video-small.mp4" type="video/mp4" media="all and (max-width: 480px)">
<source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>La mejor solución es utilizar un servicio de video y ellos lo manejarán por usted.
Audio flexible
Solo “ve” audio HTML5 si usa específicamente el atributo de controles en el elemento.
<audio controls src="https://css-tricks.com/rundown-of-handling-flexible-media/audio.ogg">
<p>Fallback.</p>
</audio>La buena noticia es que solo tiene un ancho de mandril: 100%; en ese chico malo y será flexible, flexible:
audio {
width: 100%;
}Los navegadores WebKit están maximizando el ancho de ellos a 800 px por alguna razón. Pero el jugador permanece centrado dentro del espacio. Opera y Firefox no tienen ese máximo. Todos tienen reproductores ligeramente diferentes, pero todos hacen básicamente lo mismo (reproducir el sonido y tienen botones de reproducción y pausa y esas cosas).
El único otro reproductor de sonido integrado muy popular en este momento es el reproductor SoundCloud y su ancho fluido por defecto (¡vamos, equipo!).