Hvad er responsivt design?

Responsivt design betyder, at en websides layout justerer sig til den skærm, den vises på, fra en lille telefon til en stor stationær skærm, i stedet for at forblive en fast størrelse. Anvendt på video betyder det, at afspilleren skalerer med sin container i stedet for altid at gengives med en fast pixelbredde og -højde.

Padding-bottom-teknikken

Den mest almindelige måde at gøre en indlejring responsiv på er at pakke iframen ind i en container med en procentbaseret padding-bottom (56,25% for 16:9-video), og placere iframen absolut inde i den med 100% bredde og højde.

Et nyere alternativ

Moderne CSS understøtter også aspect-ratio-egenskaben direkte, som opnår et lignende resultat med mindre markup i browsere, der understøtter den.

De to hovedteknikker til responsiv video

Responsiv videostørrelse opnås generelt på en af to måder. Den ældre, bredere kompatible teknik pakker iframen ind i en container med en procentbaseret padding-bottom kombineret med absolut positionering. Den nyere teknik bruger CSS-egenskaben aspect-ratio direkte på containeren, hvilket er kortere at skrive og lettere at læse.

Et praktisk eksempel der sammenligner begge teknikker

<!-- Padding-bottom-teknik -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- aspect-ratio-teknik -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Responsivt design kontra indlejring med fast størrelse

En indlejring med fast størrelse, med bogstavelige width- og height-attributter, er enklere at skrive, men holder op med at fungere, så snart den omgivende side vises på en skærm smallere end den faste bredde.

At teste på forskellige enheder

Blot at ændre bredden på et skrivebordsvindue fanger ikke altid alle problemer, da telefoner og tablets har andre skærmproportioner og håndterer liggende og stående retning forskelligt. Test den responsive indlejring både på en smal telefon og en bred ekstern skærm for at sikre, at videoens proportioner forbliver korrekte over hele det interval af skærmstorrelser, der faktisk bruges.

Responsivitet og container queries

Den nyeste CSS-specifikation introducerer også container queries, som lader dig tilpasse et elements størrelse baseret på dets containers bredde snarere end hele browservinduet, hvilket kan være nyttigt når video indlejres i smalle sidekolonner ved siden af bredere hovedindhold. Denne teknik er dog nyere end den klassiske padding-bottom-teknik og vinder stadig indpas.

Ofte stillede spørgsmål