Come integrare un video completamente responsive con Bootstrap

Blog News Pubblicato il Scritto da
Fonte immagine:

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>

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.chatta con whatsapp
esempio di costruzione di interfaccia Bootstrap

Hai trovato qualcosa di interessante nel sito? Hai bisogno di un consiglio o di una consulenza gratuita?
Realizza il tuo progetto ora!

Chiama il numero verde Contatto Telefonico 800 281 715 per parlare direttamente con uno specialista!
HardGroup eleva il tuo business alla massima potenza.

Richiedi informazioni
Nel triennio 2021/2023 abbiamo lavorato in White Label con 39 agenzie di comunicazione, sviluppo web e aziende di Hosting.
Abbiamo realizzato per loro oltre 90 progetti top-level.

Sei una azienda e hai bisogno di un Partner Tecnologico?

Condividilo su Facebook Twitter Whatsapp

Leggi più articoli su: Programmazione, Sviluppo web e Community - Approfondisci di più su: - Scopri tutti gli articoli di: Redazione HardGroup.
Hai provato questi servizi?
Sviluppo Web

Sviluppo Web

Sito semplice? Sito complesso? Web Application? Progetto economico? Raccontaci la tua idea.
La consulenza è gratuita!

Scopri di più Contatto Telefonico 800 281 715
Creazione di contenuti

Creazione di Contenuti

Il tuo sito è poco indicizzato? Non riesci a fruttare le potenzialità della tua piattaforma Web?
Il problema è risolvibile!

Scopri di più Contatto Telefonico 800 281 715
Riparazioni e Fixaggi

Riparazioni e Fixaggi

Il tuo sito contiene errori? È stato hackerato? I tuoi dati sono andati persi? Vorresti ottimizzarlo in ogni caso?
Richiedi una consulenza gratuita!

Scopri di più Contatto Telefonico 800 281 715
Sviluppo Web

Speed Test Optimization

Sito lento? Hai bisogno di velocizzare il tuo sito? Vuoi raggiungere uno speed test di Google tra 80 e 100?
La consulenza è gratuita!

Scopri di più Contatto Telefonico 800 281 715
Creazione di contenuti

UX Optimization

Vuoi migliorare l’esperiana utente del tuo sito? I tuoi contenuti sono difficili da raggiungere? Troppi click?
Richiedi una consulenza gratuita!

Scopri di più Contatto Telefonico 800 281 715
E-commerce Custom

E-commerce Custom

Hai bisogno di funzioni customizzate per il tuo e-commerce? Soluzione studiate per il tuo business? Raccontaci la tua idea.
Richiedi una consulenza gratuita!

Scopri di più Contatto Telefonico 800 281 715

HardGroup si impegna a essere leader in Italia
Grazie al vostro supporto siamo Official Partner:

Aruba Business Partner

Dalla Community di HardGroup