Come integrare un video completamente responsive con Bootstrap

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!

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>

Cerchi un programmatore Bootstrap PRO?

Siamo pronti a trasformare ogni tua idea in una soluzione digitale funzionale ed esteticamente impeccabile

Non lasciare che la complessità ti fermi: contattaci oggi stesso per una consulenza gratuita.

Raccontaci la tua idea.