Responsiva inbäddningar – så anpassar sig video och kartor efter skärmen

Bäddar du in en YouTube-video, en karta eller ett inlägg på din sida får du en kodsnutt med fasta mått i pixlar. På datorn ser det bra ut, men i mobilen sticker innehållet ut utanför skärmen eller lämnar en tom lucka. Förr krävdes trixande eller externa tjänster för att lösa det. I dag räcker ett par rader CSS. Här går vi igenom hur.

Varför inbäddningar spricker i mobilen

En inbäddning är nästan alltid en så kallad iframe, alltså en ram som visar en annan webbsida inuti din. Koden du får ser ofta ut ungefär så här:

<iframe width="560" height="315" src="..."></iframe>

Problemet är siffrorna. Bredden är låst till 560 pixlar oavsett hur bred skärmen är. En responsiv sida, alltså en som anpassar sig efter skärmstorlek, behöver i stället en inbäddning som fyller sin behållare och behåller rätt proportioner.

Den moderna lösningen: aspect-ratio

I dag finns en CSS-egenskap som är gjord för just det här: aspect-ratio. Den talar om för webbläsaren vilket förhållande mellan bredd och höjd elementet ska behålla när det skalas.

Lägg till en klass på din iframe:

<iframe class="video" src="..." allowfullscreen></iframe>

Och den här regeln i din CSS:

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Det är hela lösningen. Videon fyller nu bredden i sin behållare och behåller proportionerna oavsett skärmstorlek. Egenskapen fungerar i alla moderna webbläsare, och du behöver inget extra omslutande element.

Vanliga bildförhållanden:

• 16 / 9 – standard för YouTube och Vimeo.
• 4 / 3 – äldre videoformat.
• 1 / 1 – kvadratiskt, till exempel vissa sociala inlägg.

Den gamla metoden (padding-tricket)

Innan aspect-ratio fanns använde man ett knep: lägga videon i en behållare med padding-bottom: 56.25% (eftersom 9 är 56,25 procent av 16) och sedan positionera iframen absolut inuti.

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Det fungerar fortfarande, och du stöter ofta på det i äldre teman och kodbaser. Men för nya sidor är aspect-ratio både kortare och enklare att förstå.

I WordPress behöver du oftast inte göra något

Driver du WordPress löser plattformen det åt dig för de flesta tjänster. Klistra bara in länken på en egen rad i redigeraren, så känner WordPress igen den och skapar en responsiv inbäddning automatiskt. Det fungerar för bland annat YouTube, Vimeo, Spotify och X.

Undantag finns dock. Facebook och Instagram kräver numera att du hämtar inbäddningskoden och klistrar in den i ett Anpassad HTML-block, eftersom den gamla länkmetoden slutade fungera. Vi går igenom det i våra guider om att bädda in Facebookvideo och att visa Instagram på WordPress.

Ser en video ändå fel ut kan det bero på temat. Då kan du lägga in CSS enligt ovan under Anpassa → Ytterligare CSS.

Gör inbäddningarna snabbare

Inbäddningar drar ofta in mycket kod från andra webbplatser och tynger sidan. Två enkla förbättringar:

• Lägg till loading="lazy" på din iframe, så laddas innehållet först när besökaren scrollat dit.
• Sätt en title på iframen, vilket hjälper både tillgänglighet och sökmotorer.

Håll också nere antalet inbäddningar per sida. Tre videor i ett inlägg känns av i laddningstiden, särskilt i mobilen.

När inbäddningen inte visas alls

Får du bara en tom ruta beror det oftast inte på din kod, utan på att webbplatsen du försöker bädda in blockerar det. Många sajter skickar med inställningar som förbjuder att sidan visas inuti en annan. Då finns ingen lösning från din sida, utan du får länka i stället.

Andra vanliga orsaker:

• Koden klistrades in i ett vanligt textblock i stället för ett HTML-block.
• Ett säkerhetsplugin har rensat bort iframe-koden när inlägget sparades.
• Innehållet är privat eller borttaget hos källan.

Tänk på säkerheten

En iframe visar en annan webbplats inuti din. Bädda därför bara in från källor du litar på, som YouTube, Vimeo eller Google Maps. Behöver du bädda in något mindre känt kan attributet sandbox begränsa vad den inbäddade sidan får göra.

Bygger du på webben i övrigt har vi även tips om gratis ikoner till din webbsida.

Vanliga frågor (FAQ)

Hur gör jag en inbäddad video responsiv?

Sätt width: 100% och aspect-ratio: 16 / 9 på din iframe i CSS. Då fyller videon bredden och behåller proportionerna på alla skärmstorlekar.

Behöver jag fortfarande padding-tricket?

Nej, inte för nya sidor. Padding-metoden med 56,25 procent fungerar men behövs i praktiken bara för mycket gamla webbläsare, eller när du underhåller äldre kod.

Måste jag göra något i WordPress?

Oftast inte. Klistra in länken på egen rad, så skapar WordPress en responsiv inbäddning automatiskt för de flesta tjänster.

Varför visas inte min inbäddning?

Vanligast är att källan blockerar inbäddning på andra webbplatser. Kontrollera också att koden ligger i ett HTML-block och inte i ett vanligt textblock.

Vad betyder 56,25 procent?

Det är höjden i förhållande till bredden för formatet 16:9, eftersom 9 delat med 16 blir 0,5625. Talet användes i den äldre metoden för att låsa proportionerna.

Hur får jag sidan att ladda snabbare med inbäddningar?

Lägg till loading="lazy" på inbäddningarna och begränsa antalet per sida.

Sammanfattning

Att få inbäddad video, kartor och inlägg att följa layouten var länge ett pillande, och det var därför externa tjänster som gjorde om koden åt en var populära. I dag behövs de inte: två rader CSS med aspect-ratio löser saken, och i WordPress räcker det oftast att klistra in länken på egen rad. Lägg till loading="lazy" för snabbare laddning, och kom ihåg att en tom ruta nästan alltid betyder att källan blockerar inbäddning.