CSS: video di tipo responsive

Gli elementi video inseriti nelle pagine possono creare problemi qualora la risoluzione del dispositivo sia troppo bassa per ospitare le dimensioni di tali elementi. Fortunatamente esiste una soluzione. Vediamo quale.

È sufficiente sfruttare l'algoritmo CSS shrink-to-fit tramite il posizionamento contestuale:

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

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