Sådan oprettes: Responsivt Iframe

Lær, hvordan man bruger CSS til at oprette responsivt iframe.

Responsivt iframe

Opret et iframe, der holder bredde-højde-forhold (4:3, 16:9 osv.) når det tilpasses størrelsen:

Hvad er bredde-højde-forhold?

Forholdet mellem bredde og højde beskriver forholdet mellem bredden og højden. To almindelige videoforhold er 4:3 (det generelle videoformat i det 20. århundrede) og 16:9 (standardformat for HD-televiser og europæisk digital TV samt YouTube-videoer).

Sådan gør du - Responsivt Iframe

Første trin - Tilføj HTML:

Brug beholderselementer, såsom <div>, og tilføj iframe deri:

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

Andet trin - Tilføj CSS:

til padding-top Tilføj procenter, for at holde beholderens DIV's bredde-højde-forhold. Dette eksempel vil oprette en beholder med et bredde-højde-forhold på 16:9, som er YouTube-videoernes standardbredde-højde-forhold.

Eksempel - 16:9 bredde-højde-forhold

.container {
  position: relativ;
  overflow: skjult;
  bredde: 100%;
  padding-top: 56.25%; /* 16:9 bredde-højde-forhold (9 divideret med 16 er 0.5625) */
}
/* herefter indstil iframe's stil, så den tilpasser sig beholderen div fuldt ud */
.responsive-iframe {
  position: absolut;
  øverst: 0;
  venstre: 0;
  nedad: 0;
  højre: 0;
  bredde: 100%;
  højde: 100%;
}

Try it yourself

Andre bredde-højde-forhold

Eksempel - 4:3 bredde-højde-forhold

.container {
  padding-top: 75%; /* 4:3 bredde-højde-forhold */
}

Try it yourself

Eksempel - 3:2 bredde-højde-forhold

.container {
  padding-top: 66.66%; /* 3:2 bredde-højde-forhold */
}

Try it yourself

Eksempel - 8:5 bredde-højde-forhold

.container {
  padding-top: 62.5%; /* 8:5 bredde-højde-forhold */
}

Try it yourself

Eksempel - 1:1 bredde-højde-forhold (højden og bredden er altid ens)

.container {
  padding-top: 100%; /* 1:1 width-height ratio */
}

Try it yourself