Hoe te maken: Responsieve Iframe

Leer hoe je responsieve iframes maakt met CSS.

Responsieve iframe

Maak een iframe die de Hoogte-breedteverhouding behoudt bij het aanpassen van de grootte (4:3, 16:9, enz.)

Wat is een Hoogte-breedteverhouding?

De Hoogte-breedteverhouding van een element beschrijft de verhouding tussen zijn breedte en hoogte. Twee veelvoorkomende video Hoogte-breedteverhoudingen zijn 4:3 (de algemene videoformat van de 20e eeuw) en 16:9 (de standaard Hoogte-breedteverhouding van HD-televisie en Europees digitale televisie, evenals YouTube-video's).

How To - Responsieve Iframes

Eerste stap - Voeg HTML toe:

Gebruik een container-element zoals <div> en voeg een iframe toe:

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

Tweede stap - Voeg CSS toe:

voor padding-top Voeg procentwaarden toe om de Hoogte-breedteverhouding van de container DIV te behouden. Het volgende voorbeeld creëert een Hoogte-breedteverhouding van 16:9, wat de standaard Hoogte-breedteverhouding van YouTube-video's is.

Voorbeeld - Hoogte-breedteverhouding 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Hoogte-breedteverhouding 16:9 (9 gedeeld door 16 is 0.5625) */
{}
/* Vervolgens stel je de stijl van het iframe in, zodat het zich aanpast aan de volledige hoogte en breedte van de container div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Try it yourself

Andere Hoogte-breedteverhoudingen

Voorbeeld - Hoogte-breedteverhouding 4:3

.container {
  padding-top: 75%; /* Hoogte-breedteverhouding 4:3 */
{}

Try it yourself

Voorbeeld - Hoogte-breedteverhouding 3:2

.container {
  padding-top: 66.66%; /* Hoogte-breedteverhouding 3:2 */
{}

Try it yourself

Voorbeeld - Hoogte-breedteverhouding 8:5

.container {
  padding-top: 62.5%; /* Hoogte-breedteverhouding 8:5 */
{}

Try it yourself

Voorbeeld - 1:1 Hoogte-breedteverhouding (hoogte en breedte zijn altijd gelijk)

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

Try it yourself