Come fare per - Iframe reattivo
Scopri come creare iframe reattivi con CSS.
Iframe reattivi
Crea un iframe che manterrà le proporzioni (4:3, 16:9, ecc.) quando ridimensionato:
Che cos'è il rapporto d'aspetto?
Le proporzioni di un elemento descrivono la relazione proporzionale tra la sua larghezza e la sua altezza. Due proporzioni video comuni sono 4:3 (il formato video universale del 20° secolo) e 16:9 (universale per la televisione HD e la televisione digitale europea e per i video di YouTube).
Come fare per - Iframe reattivi
Passaggio 1) Aggiungi HTML:
Usa un elemento contenitore, come <div>, e aggiungi l'iframe al suo interno:
Esempio
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Passaggio 2) Aggiungi CSS:
Aggiungi un valore percentuale per padding-top
mantenere le proporzioni del contenitore DIV. L'esempio seguente creerà una proporzione di 16:9, che è la proporzione predefinita dei video di YouTube.
Esempio 16:9 Proporzioni
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Altre proporzioni:
Esempio 4:3 Proporzioni
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Esempio 3:2 Proporzioni
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Esempio 8:5 Proporzioni
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Esempio 1:1 Proporzioni (altezza e larghezza sono sempre uguali)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}