arrow_drop_up arrow_drop_down
Een responsive video embed plaatsen op je WordPress website
Sandra Boon
25 september 2014 
2 min. leestijd

Een responsive video embed plaatsen op je WordPress website

Een video embed is een video van een externe website (YouTube, Vimeo) die je op je eigen website kunt plaatsen. Een video embed op je WordPress website plaatsen is erg gemakkelijk. Zorg er eerst voor dat je video op YouTube of Vimeo is geupload. Het is verstandiger om je video NIET op je eigen server te plaatsen. Dit kost namelijk heel veel ruimte.

Video embeds zijn niet standaard responsive

De embeds zijn niet standaard responsive, waardoor ze niet automatisch meeschalen op grotere en kleinere beeldschermen. Dat kan erg vervelend zijn, vooral op smartphones. Dan kan de video bijvoorbeeld gedeeltelijk buiten het scherm vallen, waardoor het niet goed te zien is. Sommige WordPress thema’s maken de video’s automatisch responsive. Schalen de video’s op jouw website automatisch mee? Super, dan hoef je daar niks aan te veranderen ;) Schalen ze niet automatisch mee? Niet getreurd, want in dit artikel leg ik je uit hoe je de video responsive kunt maken.

01. Ga naar de YouTube pagina van je video

Ga naar de video die je hebt geupload op YouTube of Vimeo. Ik zal mijn YouTube video over online marketingstrategieën gebruiken als voorbeeld. Bovenaan de pagina vind je in de adresbalk de URL van de pagina. In het geval van mijn voorbeeld is dat: https://www.youtube.com/watch?v=KZkGuVEt_fc. Kopieer de URL van die pagina.

02. Maak de video responsive

Ga naar embedresponsively.com, vul de URL in die je zonet hebt gekopieerd en klik op de blauwe knop “Embed”. Je krijgt vervolgens een preview te zien met daaronder een lange code. Kopieer deze code.

03. Plak de code in je WordPress pagina

Log in bij je WordPress website/dashboard en ga naar de pagina waar je de video wilt plaatsen. Klik vervolgens eerst op het tabje Tekst, deze vind je rechtsboven de editor. Plaats daarna op de gewenste plek de embed code die je bij de vorige stap hebt gekopieerd.

04. Het resultaat: een video

Note: Ik heb mijn website zo aangepast dat er automatisch een wit kader om de video zit. Dit zit er dus niet standaard bij.

05. Video embed via Vimeo in plaats van YouTube.

Een Vimeo embed werkt in principe hetzelfde als een YouTube embed, alleen kies je dan bij embedresponsively.com voor de optie “Vimeo” in plaats van “YouTube”.

LET OP: Video embeds via YouTube/Vimeo

YouTube en Vimeo bieden ook zelf de mogelijkheid om video embeds toe te voegen aan je website. Je kopieert dan de code die zijn je geven en deze kun je dan op je WordPress website plaatsen. Het nadeel van deze video embeds is dat ze niet responsive zijn. Schaalt jouw website de video’s niet automatisch? Gebruik dan de instructies die ik hierboven heb gegeven en gebruik niet de embeds die YouTube en Vimeo zelf geven.

Over de schrijver
Sandra Boon
Ik (Sandra Boon van Boon Webdesign) ben jouw partner in crime voor WordPress websites en online marketing. Voor ondernemers bouw ik BoonTheme WordPress websites - de perfecte mix tussen kant-en-klaar en maatwerk. Daarnaast bouw ik ook online leeromgevingen voor mijn klanten.