Come creare: Iframe responsive

Impara come creare iframe responsive utilizzando CSS.

Iframe responsive

Creare un iframe che mantenga il rapporto di aspetto (4:3, 16:9, ecc.) quando si ridimensiona:

Cos'è il rapporto di aspetto?

Il rapporto di aspetto di un elemento descrive la relazione tra la larghezza e l'altezza. Due rapporti di aspetto di video comuni sono 4:3 (formato video universale del XX secolo) e 16:9 (formato TV ad alta definizione e TV digitale europea nonché formato universale dei video YouTube).

Come fare - Iframe responsive

Primo passo - Aggiungere HTML:

Usare l'elemento container, ad esempio <div>, e aggiungere l'iframe all'interno:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Secondo passo - Aggiungere CSS:

per padding-top Aggiungere valori percentuali per mantenere il rapporto di aspetto del div container. L'esempio seguente crea un container con un rapporto di aspetto 16:9, che è il rapporto di aspetto predefinito dei video YouTube.

Esempio - rapporto di aspetto 16:9

.container {
  posizione: relativo;
  overflow: nascosto;
  larghezza: 100%;
  padding-top: 56.25%; /* rapporto di aspetto 16:9 (9 diviso 16 è 0.5625) */
{}
/* Poi impostare lo stile dell'iframe per adattarsi alla piena altezza e larghezza del div container */
.responsive-iframe {
  posizione: assoluto;
  superiore: 0;
  sinistra: 0;
  inferiore: 0;
  destra: 0;
  larghezza: 100%;
  altezza: 100%;
{}

Prova tu stesso

Altri rapporti di aspetto

Esempio - rapporto di aspetto 4:3

.container {
  padding-top: 75%; /* rapporto di aspetto 4:3 */
{}

Prova tu stesso

Esempio - rapporto di aspetto 3:2

.container {
  padding-top: 66.66%; /* rapporto di aspetto 3:2 */
{}

Prova tu stesso

Esempio - rapporto di aspetto 8:5

.container {
  padding-top: 62.5%; /* rapporto di aspetto 8:5 */
{}

Prova tu stesso

Esempio - 1:1 rapporti di aspetto (larghezza e altezza sempre uguali)

.container {
  padding-top: 100%; /* 1:1 rapporti larghezza/altezza */
{}

Prova tu stesso