Responsive Iframe – Responsive Video

Lascio qui anche per uso personale un paio di stili che sono utili per rendere responsive gli iframe e i video.
Sono CSS molto semplici, ma veramente ti tirano fuori dai guai in caso di Responsive Fluid.
Questi stili ti permettono di integrare un video senza quelle fastidiosissime bande nere che possono vedersi lateralmente o sopra e sotto al video.
In realtà questo stile è l’ideale per rendere fluido qualsiasi iframe, anche una mappa di Google.
Lascio qui sotto un video per fare subito una prova in tempo reale.
Il video è stato realizzato da me con veramente pochissimi mezzi, quindi abbiate pietà :)

<style>
.classe-contenitore-iframe { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.classe-contenitore-iframe iframe, .classe-contenitore-iframe object, .classe-contenitore-iframe embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'><iframe src='https://www.youtube.com/embed/HMSI0EV980k' frameborder='0' allowfullscreen></iframe></div>

Per problematiche relative alla responsività del tuo sito contattami usando questo modulo.

Richiedi informazioni

Raccontami il tuo progetto, tracking, accessibilità, campagne adv da sistemare o semplicemente un sito che non vuol saperne di funzionare. Insieme possiamo migliorarlo.

    Accetto la Privacy Policy
    Autorizzo al trattamento dei miei dati personali, per ricevere le informazioni richieste attraverso questo modulo di contatto. I dati da te inseriti attraverso questo modulo verranno utilizzati solo per essere da me ricontattato.

    Recensioni

    Scrivimi una recensione

    Questo QR Code ti permette di lasciarmi una recensione in maniera facile e veloce.

    Altrimenti usa il bottone qui sotto.

    Lascia una recensione su Google