Hur man skapar: Responsiva Iframe

Lär dig hur man använder CSS för att skapa responsiva iframes.

Responsiv iframe

Skapa en iframe som behåller bredd-höjd förhållandet (4:3, 16:9 etc.)

Vad är bredd-höjd förhållande?

En elementets bredd-höjd förhållande beskriver förhållandet mellan dess bredd och höjd. Två vanliga videobredd-höjd förhållanden är 4:3 (ett allmänt videoformat under 1900-talet) och 16:9 (högupplöst TV och europeisk digital TV samt YouTube-videorns allmänna format).

Hur man gör - Responsiva Iframes

Steg 1 - Lägg till HTML:

Använd behållarelement, till exempel <div>, och lägg till iframe där inne:

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

Steg 2 - Lägg till CSS:

för padding-top Lägg till procentvärden för att behålla behållarens DIV:s bredd-höjd förhållande. Följande exempel skapar en behållare med bredd-höjd förhållandet 16:9, vilket är YouTube-videorns standardbredd-höjd förhållande.

Exempel - 16:9 bredd-höjd förhållande

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 bredd-höjd förhållande (9 dividerat med 16 är 0.5625) */
}
/* Sedan ställ in iframe-stilen så att den anpassar sig till behållarens div i full höjd och bredd */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Prova själv

Andra bredd-höjd förhållanden

Exempel - 4:3 bredd-höjd förhållande

.container {
  padding-top: 75%; /* 4:3 bredd-höjd förhållande */
}

Prova själv

Exempel - 3:2 bredd-höjd förhållande

.container {
  padding-top: 66.66%; /* 3:2 bredd-höjd förhållande */
}

Prova själv

Exempel - 8:5 bredd-höjd förhållande

.container {
  padding-top: 62.5%; /* 8:5 bredd-höjd förhållande */
}

Prova själv

Exempel - 1:1 bredd-höjd förhållande (bredd och höjd är alltid lika)

.container {
  padding-top: 100%; /* 1:1 bredd/höjd förhållande */
}

Prova själv