Una delle cose peggiori che può capitare allo sviluppo di un’interfaccia grafica web Bootstrap based è quella di visualizzare un video fuori proporzione ovvero non tenendo conto se il video è stato progettato per una visualizzazione a 16:9 o a 4:3.
Nonostante Bootstrap, a partire dalla versione 3, mette a disposizione delle classi specifiche, sempre più di frequente notiamo che non sempre i sviluppatori le utilizzano.
Le classi in questione sono
embed-responsive embed-responsive-16by9
per un aspetto in 16:9 e
embed-responsive embed-responsive-4by3
per un aspetto in 4:3.
Ecco i due esempi:
<!– 16:9 aspect ratio –>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/...."></iframe>
</div>
<!– 4:3 aspect ratio –>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/...."></iframe>
</div>
