Wat is beeldverhouding?

Beeldverhouding beschrijft de vorm van een videobeeld als een verhouding tussen breedte en hoogte. Bijna alle standaard YouTube-video’s worden gefilmd en gepubliceerd in 16:9 (breedbeeld), terwijl Shorts worden gefilmd en gepubliceerd in 9:16 (verticaal).

Waarom dit belangrijk is bij embedden

Als de breedte en hoogte van een speler niet overeenkomen met de echte beeldverhouding van de video, krijg je zwarte balken of een uitgerekt, bijgesneden beeld. Een responsive embed houdt op elke grootte de juiste verhouding aan door een op percentages gebaseerde wrapper te gebruiken (56,25% padding-bottom voor 16:9, 177,78% voor 9:16) in plaats van vaste pixelafmetingen.

Automatisch de juiste verhouding krijgen

De embed-code generator wisselt zijn responsive wrapper automatisch tussen 16:9 en 9:16 zodra je het Shorts-formaat inschakelt, zodat je het padding-percentage niet handmatig hoeft te berekenen.

Hoe beeldverhouding in code wordt uitgedrukt

Beeldverhouding wordt meestal geschreven als twee getallen gescheiden door een dubbele punt, die de breedte ten opzichte van de hoogte beschrijven: 16:9 betekent dat de breedte 16 eenheden is voor elke 9 eenheden hoogte, ongeacht de werkelijke pixelgrootte. Daarom delen een 1280×720-video en een 640×360-versie van dezelfde beelden dezelfde 16:9-verhouding: beide vereenvoudigen naar dezelfde proportie. In CSS komt dit idee terug als een percentage (56,25%, oftewel 9 gedeeld door 16), gebruikt in de klassieke responsive embed-techniek, of rechtstreeks via de moderne aspect-ratio-eigenschap, geschreven als aspect-ratio:16/9.

Een praktisch voorbeeld

Stel je een fotogalerijpagina voor met een mix van gewone YouTube-video’s en Shorts. Eén vaste embed-grootte voor beide gebruiken zou ofwel de verticale Shorts lelijk in een breed vak bijsnijden, of de breedbeeldvideo’s te klein maken om in een smal vak te passen. De oplossing is de juiste beeldverhouding per videotype toepassen: een 16:9-wrapper voor gewone video’s, en een aparte 9:16-wrapper specifiek voor Shorts, elk reserveert de juiste vorm ruimte al voordat de video is geladen.

Beeldverhouding versus resolutie

Beeldverhouding en resolutie zijn verwante maar aparte begrippen, en ze door elkaar halen is een veelvoorkomende bron van verwarring. Resolutie is het werkelijke aantal pixels (bijvoorbeeld 1920×1080); beeldverhouding is de verhouding waartoe die getallen vereenvoudigen (16:9 in dat geval). Twee video’s kunnen dezelfde resolutie hebben maar een andere beeldverhouding als er letterboxing is toegepast, en twee video’s kunnen dezelfde beeldverhouding hebben bij totaal verschillende resoluties: een 640×360-voorbeeld en een 1920×1080-volledige versie zijn allebei 16:9. Bij het bouwen van een responsive embed is het de beeldverhouding, niet de specifieke resolutie, die de verhoudingen van de wrapper bepaalt.

Een verkeerde verhouding is een van de meest zichtbare embed-fouten, omdat het direct opvallende zwarte balken of uitgerekt, vervormd beeld oplevert, anders dan subtielere problemen zoals een ontbrekende privacyparameter.

Een snelle manier om te controleren of je de juiste verhouding hebt voordat je publiceert, is de embed bekijken op zowel een brede desktopbreedte als een smalle mobiele breedte; als er bij beide zwarte balken verschijnen, komt het wrapper-percentage niet overeen met de werkelijke vorm van de video en moet het worden aangepast.

Veelgestelde vragen