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.

Supporto Professionale Bootstrap 5?

Trasforma il tuo sito web in un capolavoro di design e funzionalità.

Richiedi una consulenza gratuita

Contattaci ora!chatta con whatsapp
risultato speed test Google del sito HardGroup per mobile

Build fast, responsive sites with Bootstrap

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>