Tech 5596 x bekeken

Binnen de webrichtlijnen video embedden

11 mei 2016 - Dave van Emmerik

Youtube gevalideerd embedden binnen de WCAG 2.0 webrichtlijnen, zonder custom players en javascript, maar vooral zonder verlies van functionaliteit.

Het embedden van (eigen) video’s via YouTube biedt vele voordelen. De videogigant beschikt over uitstekende en snelle servers over de gehele wereld. Zij faciliteren niet alleen de video, de player zelf, maar ook functionaliteiten voor bijvoorbeeld ondertiteling of het bewerken van video en gratis bandbreedte. 

Nog belangrijker is wellicht dat je bij YouTube niet na hoeft te denken over de diverse browsers en formaten. Internet Explorer geeft bijvoorbeeld de voorkeur aan een ander videoformaat dan Chrome op een iOS-device. YouTube regelt dit out-of-the-box door één geüploade video niet alleen in Flash, maar ook in MP4, WebM en Ogv om te zetten. Zij verzorgen ook diverse afmetingen per bestandsformaat. Voor ieder device krijg je dus simpelweg de oplossing die hier het beste op aansluit. 
Ter illustratie, een Full HD MP4 wordt omgezet in vier bestandsformaten en vier afmetingen. Het resultaat is 4x4 = 16 video’s in één actie.

YouTube biedt twee embedmethodes aan: iFrames en objects:
1. iFramemethode (aangeraden door Google)
2. Objectmethode



Bij een iFrame wordt de content in Flash en HTML5 aangeleverd. Bij de objectmethode is dit uitsluitend de Flashversie. Dit geeft een probleem wanneer je aan de webrichtlijnen dient te voldoen. Volgens deze richtlijnen mag je namelijk geen frames, dus ook geen iFrames, gebruiken en wordt een open standaard (Flash is dat niet) min of meer verplicht gesteld. Beide methodes zouden daardoor afvallen.

Gelukkig zijn er, zoals bij de meeste Google diensten, toch alternatieve mogelijkheden. Ze worden alleen niet aan de grote klok gehangen. Wanneer we beide methodes combineren en aanvullen met vrij eenvoudige HTML-tags, kan toch voldaan worden aan alle eisen en gelden alleen nog de voordelen die YouTube te bieden heeft.
 
Youtube embedden

Op de eerste regel wordt een container geplaatst, hiermee kan de styling van de video aangepast worden. In de object-tag wordt vervolgens een breedte van honderd procent meegegeven, aangevuld met een automatische hoogte. Dit zorgt ervoor dat de video responsive is én blijft. Belangrijk zijn daarna de verwijzingen naar het bronbestand. Deze komen zowel in de param- als objecttag voor. De crux is om de juiste parameters te voeren, zodat HTML5 geforceerd ingeladen wordt. Eventuele aanvullende settings, zoals ‘modestbranding’, kunnen naar eigen inzicht worden toegevoegd. Dit geldt ook voor de standaard styling van de player. Om ook een poster en fallback te bieden, kan een noembed-tag worden opgenomen met daarin een screenshot van de video die zelf door de uploader te bepalen is. De verwijzing naar de video is dan niet verplicht, maar wel wenselijk.

Estate Internet gebruikt responsive YouTube video’s die aan de gestelde richtlijnen voldoen voor onder andere Veiligheidsregio MWB en Vilentum Hogeschool. Uiteraard bieden wij ook de mogelijkheid om een complete custom player op maat te maken.
 

Dave van Emmerik

Webdeveloper met interesse voor de interactie tussen Design, Front-End, UX en IxD. Stiekeme liefhebber van PHP en is overtuigd van de toekomst van JS.

Reacties ()