Responsive iframe met Youtube video’s

Responsive design video’s

Responsive design is een must voor websites, zoals ik onlangs schreef. Websites worden vaak bekeken op telefoons en tablets, dus is het zaak ervoor te zorgen dat de inhoud zich aanpast aan de grootte van het scherm. WordPress en andere CMS systemen houden hier vaak al rekening mee, door responsive thema’s ter beschikking te stellen. Het is zaak hier rekening mee te maken bij het opzetten van een website of webshop. Bekijk je de site dan op je telefoon, dan zie je dat alles mooi meeschaalt met het formaat van je telefoon.  

Responsive menu icon

Afbeeldingen worden mooi weergegeven, het menu veranderd in een zogenaamd hamburgermenu, waardoor alles mooi overzichtelijk blijft.

Meestal worden er op je telefoon ook afbeeldingen geladen die kleiner zijn, dus dat scheelt weer op je databundel.

Tot zover het goede nieuws. Want sommige html elementen zijn van nature niet responsive. Ze dateren vaak al uit de “internet oertijd”, waarin iedereen nog een PC had met Windows 95 en Internet explorer. Maar daarmee kom je anno 2017 niet meer weg. Volgens Techzine is zo’n driekwart van het internet verkeer in 2017 mobiel.

Iframes zijn bijvoorbeeld niet responsive. En daar was ook nooit zoveel behoefte aan. Maar als je nu bijvoorbeeld een Youtube video wilt insluiten op je website krijg je bijvoorbeeld de volgende code: “<iframe src=”https://www.youtube.com/embed/p0ECgV22DKo?rel=0″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>”

Met een truc gaan we zorgen dat de iframe responsive wordt.

De theorie

Video’s hebben een vaste ratio. Vaak is dat 16:9 of 4:3. En natuurlijk wil je dat deze ratio hetzelfde blijft, anders wordt de video uit perspectief getrokken. Net als bij een foto moeten de verhoudingen wel correct blijven. We kunnen dus geen gebruik maken van vaste waarden, maar van percentages. En we willen dus graag dat de video binnen een container kleiner of groter wordt afhankelijk van het scherm.

De praktijk

Zoals gezegd is het niet mogelijk om iframes responsive te maken om dit resultaat te bereiken. Maar we kunnen wel een zogenaamde container div gebruiken waarbinnen de iframe zich bevindt. Met de padding property kunnen we zorgen dat de video het juist perspectief behoudt.

Schematisch ziet dit er dan als volgt uit:

video

Om de iframe zetten we een container DIV. Door gebruik te maken van de padding op de container kunnen we zorgen dat het perspectief blijft kloppen. Maar daarvoor kunnen we niet gebruik maken van een vaste waarde in pixels, maar moeten we gebruik maken van een percentage.

Om dit te bepalen moet je weten wat de ratio van de video is. Uitgaande van 16:9 wordt de padding 56,25% (9/16*100). De iframe zelf krijgt dan een breedte en een hoogte van 100% mee. De padding zorgt ervoor dat de beschikbare ruimte juist wordt gebruikt.

In CSS ziet dat er dan als volgt uit:

Met deze simpele truczorg je ervoor dat je video responsive wordt. Voorbeelden van hoe dit in zijn werk gaat zie je op de volgende sites:

Magento –> Beadles.nl
Wordpress –> Lifestylez.nl 

Nog een tip tot besluit: als je het ook vervelend vindt dat Youtube automatisch gerelateerde video’s laat zien aan het eind, voeg dan ?rel=0 toe aan de url van je video. Hierdoor stopt de video gewoon aan het eind zonder andere video’s te laten zien.