iFrame Tool

Con questo strumento, puoi rendere responsive gli iFrame, per i video di Youtube e altro. In questo modo, verranno visualizzati correttamente anche sui dispositivi mobili.
Devi soltanto scegliere la funzionalità che ti serve, inserire l'indirizzo, o il codice, come richiesto, nello spazio apposito e poi cliccare su "Embed".
Le regole di stile ottenute vanno poste nella sezione head della pagina, mentre il codice dell'iFrame va messo nella sezione body, nel punto dove si desidera che l'iFrame appaia.
Per rendere lo sfondo dell'iFrame trasparente, bisogna aggiungere la stringa indicata in rosso nell'esempio qui sotto:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 10px; left: 0; width: 100%; height: 100%; }</style>
<body style="background-color:transparent">
<div class='embed-container'><iframe src='URL-pagina' ></iframe></div> </body>

Consiglio anche, per una migliore disposizione, di aggiungere una distanza di 10px dal margine superiore (top).

(Fonte)

Tutti gli argomenti