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.

Hai un problema con il web?

Il tuo sito internet non vuole funzionare?

Vuoi rinnovarlo o sistemarlo?

Hai un’idea di integrazione ma non sai se è possibile realizzarla o meno?

    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 qui sotto ti lascio un bottone, con il quale puoi lasciare la recensione direttamente su Google My Business.

    Lascia una recensione su Google