3.1 - Video responsive con css

Para visualizar correctamente un video en diferentes tamaños de viewport el contenedor del video (frame) debe guardar una proporción estándar de 16:9 entre su ancho y alto (relación de aspecto ó aspect ratio) a lo largo de los diferentes medias queries.

Este contenedor anidará un elemento HTML como por ejemplo <iframe> para insertar un contenido a la web principal y mantener el aspect ratio constante.

El formato 16:9 codifica en las resoluciones más comúnmente utilizadas: 240 píxeles: 426 x 240 360 píxeles: 640 x 360 480 píxeles: 854 x 480 720 píxeles: 1280 x 720 1080 píxeles: 1920 x 1080

Forma clásica de crear un contenedor responsive para video: Para mantener el aspect ratio, a este contenedor se le da una altura de cero y un valor de padding-bottom en porcentaje (que en función al width del elemento mantendrá un aspect ratio constante). Por ejemplo, 56.25% para un aspect ratio 16:9, dada por la ecuación: $[ ( 9 / 16 ) * 100 ]$

/**frame responsive**/
.video{
	height: 0;
	padding-bottom: 56.25%;
	background: black;
	position: relative;
}
/**iframe**/
.video > iframe{
	position: absolute;
	width:100%;
	height: 100%;
}

3.2 - Video responsive con css grid

Contenedor responsive para video utilizando unidades de viewport:

.video{
	--unit :5vmax;
	/*--unit :5vmin;*/
	width : calc(var(--unit)*16);
	height : calc(var(--unit)*9);
	background :red;
}
.video > iframe{
	width:100%;
	height: 100%;
}

/*Con JS se pueden manipular variables CSS,
de esa forma se lee el tamaño del viewport
y se asigna un valor a la varible CSS*/

Contenedor responsive formato 16:9 utilizando display grid y Sass.

/*declarando @mixin */
@mixin aspectRatio($w, $h){
	display: grid;
	grid-template-columns: repeat($w, 1fr);
	grid-template-rows: repeat($h, 1fr);
	background:blue;
	position: relative;

	&::before {
		content:"";
		display: block;
		padding-bottom: 100%;
	}
}

/*implementación*/
.video{
	@include aspectRatio(16,9);

	> iframe{
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

3.3 - Imágenes responsive con css

Si bien las imágenes cargadas en un diseño RWD deben adaptarse al tamaño del contenedor reponsive, estas también deben optimizar su carga en la web según el tamaño de viewport del dispositivo; Partiendo del principio de que no es necesario mostrar una imagen de gran tamaño en una pantalla significativamente más pequeña que el tamaño para el que fue diseñada, hacerlo genera costes de ancho de banda tanto para el usuario final como para la carga de la web.

Imágenes adaptables:

Es una forma de ofrecer al navegador varias versiones de imágenes en diferentes archivos (ya sea que muestren lo mismo) pero que contengan diferentes resoluciones para que la carga de estas imágenes sea según las características y tamaño de pantalla del dispositivo y/o adecuadas para diferentes asignaciones de espacio y orientación.