Hoe OM - Responsiewe iframe
Leer hoe om responsiewe iframes met CSS te skep.
Responsiewe iframes
Skep 'n iframe wat die aspekverhouding (4:3, 16:9, ens.) sal behou wanneer die grootte verander word:
Wat is aspekverhouding?
Die aspekverhouding van 'n element beskryf die proporsionele verhouding tussen sy breedte en sy hoogte. Twee algemene video-aspekverhoudings is 4:3 (die universele videoformaat van die 20ste eeu), en 16:9 (universeel vir HD-televisie en Europese digitale televisie, en vir YouTube-video's).
Hoe om - Responsiewe iframes
Stap 1) Voeg HTML by:
Gebruik 'n houerelement, soos <div>, en voeg die iframe binne-in dit by:
Voorbeeld
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Stap 2) Voeg CSS by:
Voeg 'n persentasiewaarde padding-top
by om die aspekverhouding van die houer DIV te handhaaf. Die volgende voorbeeld sal 'n aspekverhouding van 16:9 skep, wat die verstekverhouding van YouTube-video's is.
Voorbeeld 16:9 Aspekverhouding
.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%;
}
Ander aspekverhoudings:
Voorbeeld 4:3 Aspekverhouding
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Voorbeeld 3:2 Aspekverhouding
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Voorbeeld 8:5 Aspekverhouding
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Voorbeeld 1:1 Aspekverhouding (Hoogte en breedte is altyd gelyk)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}