Video’s geven je blogbericht een heel nieuw leven. Mensen kijken graag naar dingen en iets wat in 600 woorden beschreven wordt, kun je in een filmpje van 2 minuten uitleggen.
Sinds WordPress versie 2.9 kun je heel eenvoudig video’s van YouTube embedden in je berichten en pagina’s op je WordPress website. Met de nieuwe editor in WordPress 5.0 is het gelukkig niet moeilijker geworden.
Het is niet alleen mogelijk om YouTube video’s te embedden, het kan ook met video’s van websites als Vimeo, Flickr, DailyMotion, WordPress.tv, en nog een aantal meer.
Voor het gemak neem ik in dit artikel YouTube als voorbeeld omdat dit de grootste en populairste videowebsite is.
Video: YouTube video insluiten op WordPress
In onderstaande video laat ik je zien hoe je een Youtube video kunt insluiten op jouw WordPress website.
Heb je de uitleg liever in tekst? Lees vooral hieronder verder.
Hoe je een YouTube video embed op je WordPress website
Er zijn verschillende manieren om een video van YouTube te embedden op je WordPress website. Bij de ene manier doet WordPress het werk en bij de andere manier kun je zelf de embedcode (insluitcode) handmatig plaatsen.
Youtube video insluiten in WordPress 5.0 en hoger
In WordPress 5.0 is een nieuwe editor gekomen, namelijk de Gutenberg editor. Je kunt met deze editor op een hele eenvoudige manier een YouTube video embedden op je website.
Om een video in te sluiten kun je het YouTube blok gebruiken. Je kunt dit blok vinden onder het tabje insluitingen.
Zodra je op het YouTube blok hebt geklikt, krijg je de mogelijkheid om een URL van een YouTube video toe te voegen.
Vul de URL van de video in die je wilt embedden en druk vervolgens op “Insluiten”. Meer werk is het niet. Je video zal nu getoond worden in de editor zelf en natuurlijk in het artikel. In de editor ziet het er als volgt uit.
Je hebt zoals je ziet dus ook nog de mogelijkheid om een onderschrift toe te voegen.
Youtube video insluiten in WordPress 4.9 en lager
In WordPress 4.9 en lager werkt alles net een heel klein beetje anders. Je hebt hier namelijk nog te maken met de klassieke editor. In plaats van met blokken, werk je met een lap tekst. Je kunt de video insluiten met behulp van de URL of je kunt een insluitcode gebruiken die je op YouTube kunt vinden.
Manier 1: Maak gebruik van WordPress oEmbed
Sinds WordPress versie 2.9 maakt WordPress gebruik van de oEmbed functionaliteit. oEmbed is een protocol voor site A (je blog) om aan site B (zoals YouTube) de HTML code te vragen die nodig is om content van site B te embedden.
oEmbed is gemaakt om te voorkomen dat je HTML code hoeft te kopiëren van de video (of andere media) van de website waar het gehost staat. Je kunt met de volgende stappen eenvoudig een video embedden dankzij oEmbed.
Stap 1: Zoek op YouTube een video uit die je op jouw website wilt plaatsen.
Stap 2: Kopieer de URL van je uitgekozen video.
Stap 3: Ga naar het bericht (of pagina) waar je de video op wilt embedden en plak de URL op de juiste plek in het bericht. De YouTube video zal nu te zien zijn wanneer je je bericht bekijkt.
Extra informatie
Het maakt niet uit of je de URL in de visuele editor (WYSIWYG) plakt of in de HTML editor. Het zal in beide gevallen werken.
Waar je wel op moet letten is dat de URL een regel voor zichzelf heeft en dat de URL niet klikbaar (een hyperlink) is.
Voorbeeld hoe het moet:
Tekst, tekst en nog meer tekst.
http://www.youtube.com/watch?v=ID
Meer hoef je niet te doen om een filmpje in je bericht te krijgen, het is echt super eenvoudig. Het werkt overigens niet alleen zo voor YouTube, je kunt ook Spotify embedden op je WordPress website dankzij WordPress oEmbed.
Manier 2: Embed handmatig een YouTube video
Dit is een manier die je ook kunt gebruiken als je geen WordPress website hebt. Het is nog altijd vrij eenvoudig.
Stap 1: Zoek op YouTube uit die je op jouw website wilt plaatsen.
Stap 2: Klik onder de video op “Delen” en vervolgens op “Insluiten”. Je krijgt nu het volgende te zien:
Stap 3: Vul de opties naar wens in en kopieer de insluitcode die je krijgt.
Videoformaat: Wanneer je op de knop klikt waar in bovenstaande afbeelding 560×315 staat, kun je het formaat van de video aanpassen. Er staan een aantal suggesties voor formaten en je hebt ook de mogelijkheid om een aangepast formaat te maken zodat het perfect op je website past.
Voorgestelde video’s: Indien je op het einde van de video andere video’s wilt laten zien kun je hier een vinkje neerzetten. Deze voorgestelde video’s kunnen ook van andere mensen zijn.
Privacymodus: Als je deze optie inschakelt betekent het dat YouTube geen informatie over bezoekers opslaat op je webpagina tenzij ze de video afspelen.
Oude insluitcode: Indien je alleen Flash ondersteuning wilt geven aan deze video kun je hier een vinkje zetten. Dit zou ik zelf niet aanraden om te doen. De standaard insluitcode ondersteunt namelijk ook flash en verder ook nog HTML5.
Stap 4: Ga naar het bericht (of pagina) waar je de video op wilt embedden. Je kunt vervolgens de insluitcode in de teksteditor plakken op de juiste plek in het bericht. De YouTube video zal nu te zien zijn wanneer je je bericht bekijkt.
Let op: Je moet de insluitcode altijd plakken in de teksteditor en dus niet in de Wysiwyg editor. Plak je het wel in de Wysiwyg editor, dan zal de insluitcode als tekst verschijnen. Je kunt rechtsboven in de bewerker de teksteditor selecteren.
Extra informatie
Het is ook mogelijk om voor
elkaar te krijgen dat de video automatisch afspeelt, vanaf een bepaalde
tijdstip start of dat de ondertiteling automatisch aan staat.
Hoe je dit precies kunt instellen kun je bekijken op de pagina “Video’s afspeellijsten insluiten” van YouTube zelf.
YouTube video’s maken je website trager
YouTube video’s op je website plaatsen is sowieso altijd een goed idee. Bij mij zie je ook niet voor niks allerlei video’s in mijn artikelen. Wanneer je echter heel veel video’s plaatst, zeker op een enkele pagina, dan zal je merken dat je website wat trager wordt.
Er zijn diverse plugins beschikbaar die ervoor kunnen zorgen dat je hier geen last van zal ondervinden. Een cache plugin als WP rocket, wat ik sowieso aan kan raden om te gebruiken, is hier een ontzettend goed voorbeeld van. Hier heb je de optie om lazyloading voor YouTube video’s te gebruiken.
Wanneer een bezoeker je pagina bezoekt, dan zal er eerst alleen een thumbnail van de video geladen worden. Klikt de bezoeker op de thumbnail om de video te bekijken, dan wordt de video snel geladen zodat de bezoeker het kan bekijken.
Dit zorgt voor een vermindering van het aantal HTTP-verzoeken. Ik snap dat je wellicht niet weet wat ik hiermee bedoel. Simpel gezegd hoeft er minder direct geladen te worden op je pagina, wat voor een snelheidsverbetering zorgt.
Ik hoop dat het embedden van een YouTube video geen probleem meer voor je is na het lezen van dit artikel.
Indien je nog vragen hebt kun je deze hieronder in de reacties stellen. Wil je graag op de hoogte blijven van de video’s die ik publiceer op YouTube? Abonneer je dan op mijn YouTube kanaal.
