Vad är responsiv design?

Responsiv design betyder att en webbsidas layout anpassar sig till skärmen den visas på, från en liten telefon till en stor bordsskärm, istället för att förbli en fäst storlek. Tillämpat på video betyder det att spelaren skalas med sin behållare istället för att alltid renderas med en fäst bredd och höjd i pixlar.

Padding-bottom-tekniken

Det vanligaste sättet att göra en inbäddning responsiv är att omsluta iframen i en behållare med en procentbaserad padding-bottom (56.25% för 16:9-video), och positionera iframen absolut inuti den till 100% bredd och höjd.

Ett nyare alternativ

Modern CSS stödjer också aspect-ratio-egenskapen direkt, som uppnår ett liknande resultat med mindre markup i webbläsare som stödjer den.

De två huvudteknikerna för responsiv video

Responsiv videostorlek uppnås generellt på ett av två sätt. Den äldre, bredare kompatibla tekniken omsluter iframen i en behållare med en procentbaserad padding-bottom kombinerad med absolut positionering. Den nyare tekniken använder CSS-egenskapen aspect-ratio direkt på behållaren, vilket är kortare att skriva och lättare att läsa.

Ett praktiskt exempel som jämför både teknikerna

<!-- 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>

Responsiv design jämfört med inbäddning med fäst storlek

En inbäddning med fäst storlek, med bokstavliga width- och height-attribut, är enklare att skriva men slutar fungera så snart den omgivande sidan visas på en skärm smalare an den fasta bredden.

Att testa på olika enheter

Att bara andra bredden på ett skrivbordsfönster fångar inte alltid alla problem, eftersom telefoner och surfplattor har andra skärmproportioner och hanterar liggande respektive staende läge annorlunda. Testa den responsiva inbäddningen både på en smal telefon och en bred extern bildskärm för att säkerställa att videons proportioner förblir korrekta över hela det intervall av skärmstorlekar som faktiskt används.

Responsivitet och container queries

Den senaste CSS-specifikationen inför också container queries, som låter dig anpassa ett elements storlek baserat på dess behållares bredd snarare an hela webbläsarfönstret, vilket kan vara användbart när video bäddas in i smala sidokolumner bredvid bredare huvudinnehåll. Denna teknik är dock nyare an den klassiska padding-bottom-tekniken och vinner fortfarande märk.

Vanliga frågor