Wat is responsive design?

Responsive design betekent dat de opmaak van een webpagina zich aanpast aan het scherm waarop deze wordt bekeken, van een kleine telefoon tot een groot bureaubladscherm, in plaats van op een vaste grootte te blijven. Toegepast op video betekent dit dat de speler meeschaalt met zijn container in plaats van altijd op één vaste pixelbreedte en -hoogte te renderen.

De padding-bottom-techniek

De meest gebruikte manier om een embed responsive te maken, is de iframe verpakken in een container met een op percentages gebaseerde padding-bottom (56,25% voor 16:9-video), en de iframe daarbinnen absoluut te positioneren op 100% breedte en hoogte. Dit houdt de beeldverhouding correct op elke containerbreedte.

Een nieuwer alternatief

Moderne CSS ondersteunt ook rechtstreeks de aspect-ratio-eigenschap, die een vergelijkbaar resultaat bereikt met minder opmaak in browsers die dit ondersteunen. Zie de volledige gids voor responsive embeds voor werkende voorbeelden van beide aanpakken.

De twee belangrijkste technieken voor responsive video

Responsive videoformattering wordt over het algemeen op een van twee manieren bereikt. De oudere, breder compatibele techniek verpakt de iframe in een container met een op percentages gebaseerde padding-bottom (56,25% voor 16:9-video) gecombineerd met absolute positionering, een truc die al meer dan tien jaar betrouwbaar werkt sinds responsive design gangbaar werd. De nieuwere techniek gebruikt de CSS aspect-ratio-eigenschap rechtstreeks op de container, wat korter te schrijven en makkelijker te lezen is, ten koste van afhankelijkheid van een CSS-functie die niet in sommige aanzienlijk oudere browsers wordt ondersteund.

Een praktisch voorbeeld met beide technieken

<!-- Padding-bottom-techniek -->
<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-techniek -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Beide leveren hetzelfde visuele resultaat op in moderne browsers; de keuze komt vooral neer op hoeveel ondersteuning voor oudere browsers je publiek vereist.

Responsive design versus embedden op vaste grootte

Een embed met vaste grootte, met letterlijke breedte- en hoogte-attributen, is eenvoudiger te schrijven maar breekt zodra de omliggende pagina wordt bekeken op een scherm smaller dan die vaste breedte, waarbij de opmaak overloopt of horizontaal scrollen nodig is. Responsive design ruilt een kleine hoeveelheid extra opzetcomplexiteit in voor een embed die correct werkt over het volledige bereik aan schermformaten dat bezoekers daadwerkelijk gebruiken, waarom het de aanbevolen standaard is voor vrijwel alle moderne websites.

Testen over een echt bereik aan apparaatbreedtes, niet alleen een desktopbrowservenster een beetje van formaat veranderen, blijft de betrouwbaarste manier om te bevestigen dat een responsive embed daadwerkelijk correct werkt voor het volledige bereik aan bezoekers dat een typische website krijgt, van kleine telefoons tot grote externe monitoren.

Veelgestelde vragen