Embed Youtube en Vimeo in WordPress

Video portalen als Youtube en Vimeo bieden de mogelijkheid om filmpjes in te binden (embed) in je eigen bijdragen van je eigen blog. Met het veelvuldig gebruik van iPads, is het zinvol dit op de juiste wijze te doen. Doordat de iPad geen Adobe Flash meer ondersteunt, is het zeer onverstandig om hiervoor plugins of andere addons te gebruiken die deze filmpjes nog steeds met de embedded Flash player inbinden. Het inbinden van Microsoft Silverlight filmpjes (zoals deze nog op de site van bv. het Algemeen Dagblad) worden gebruikt, moet men in het geheel achterwege laten. Dit, omdat ook Silverlight niet op een iPad wordt ondersteund.

Dus voor het grootste bereik dient men zich te beperken tot het inbinden van filmpjes die HTML5 ondersteunen. Anders loopt men het gevaar dat de site zich wel goed laat zien op een PC (waar plugins als Flash en Silverlight kunnen worden geïnstalleerd), maar niet op een tablet.

Embed Youtube filmpjes

Het inbinden van een Youtube filmpje is niet zo moeilijk. Het enige wat vereist is een beetje durf om dit in de HTML van het artikel te doen.

Embed van Youtube

Onder aan het filmpje zie de Share (delen) knop. Klik hier op.

Embed van Youtube

Je ziet nu dat de hyperlink naar het filmpje wordt getoond. Klik nu op de knop Embed (inbinden).

Embed van Youtube

Selecteer nu het juiste formaat. Zorg dat je filmpjes niet groter inbind dan je artikelen op je blog breed zijn. Meestal is 560 x 315 het beste formaat. Maar je kunt ook een aangepast (custom) formaat aangeven. Het mooiste is het als je telkens hetzelfde formaat gebruikt (bv. 500 breed). Je hoeft alleen een breedte in te voeren, Youtube zal zelf de hoogte (height) er bij vermelden. Nadat dit is gedaan zal de html in het blauwe gedeelte automatisch worden aangepast.

Als je wilt vermijden dat na het afspelen er nog meer aanbevelingen worden getoond, haal dan de vink weg bij: Show suggested videos when videos when the videos finishes.

Om er voor te zorgen dat er geen cookie informatie wordt geplaatst, haal je ook de vink bij: Enable privacy-enhanced mode weg. Daarmee voldoe je ook nog eens aan de Nederlandse cookie wetgeving.

Kopiëer nu de tekst die begint met <iframe in haar geheel. Deze gaan we invoegen in ons artikel.

Inbedden met Windows Live Writer

image

In Windows Live Writer kan het nog al eens lastig zijn om de juiste plaats voor het inbinden te vinden. Zeker als je het artikel al wel helemaal hebt geschreven. Hiervoor kun je een trucje gebruiken. Plaats in het artikel een regel met een gekke tekst (PipoDeClown). Deze plek kun je vervolgens wel redelijk goed vinden.

image

Klik nu op de Source (broncode) tab onder aan de pagina. Nu zal er een hoop html code worden getoond.

Druk vervolgens op CTRL-F (zoeken). En tik je gekke tekst (PipoDeClown) in.

image

Nu zal de gevonden tekst worden getoond. Precies tussen een <p> en een </p> tag.

image

Plak nu de gekopieerde tekst uit Youtube als vervanging van het woord PipoDeClown (CTRL-V). Klik op de afbeelding hieronder voor vergroting.

image

Klik nu weer op de Edit (wijzigen) tab onderaan de pagina.

image

Nu zie je een groot zwart vlak. Dit is de plek waar je filmpje nu is ingebed. Geen zorg, hoewel het hier op zwart staat, zal het op je pagina goed worden getoond.

image

Inbinden met de editor van de WordPress backend

Als je geen Windows Live Writer gebruikt maar direct in de WordPress backend (admin) je artikelen tikt, dan kun je dezelfde truc gebruiken als hierboven beschreven. In de editor zie je aan de rechterzijde tabs met Wysiwyg en HTML. Klik nu op de HTML tab.

image

Na het klikken op de HTML tab zie je de HTML broncode. Met je browser kun je nu gewoon zoeken op je gekke woord PipoDeClown.

image

Het verschil is echter dat nu de <p> en </p> tags ontbreken. Dat is geen probleem, je plakt wederom gewoon de tekst uit Youtube over PipoDeClown.

image

Vervolgens klik je weer op de Wysiwyg tab, om terug te keren naar de editor zonder al deze cryptisch uitziende HTML broncode.

image

Nu verschijnt er een groot geel vlak. Maar geen zorg. Na het publiceren zal het er allemaal picobello uitzien.

image

Embed van Vimeo filmpjes

Het inbinden van Vimeo filmpjes loopt geheel in lijn met datgene wat hierboven is beschreven. Het enige verschil zit in de wijze waarop je HTML code voor het inbinden binnen Vimeo verkrijgt.

Inbinden van Vimeo, the Chase

Aan de rechterzijde van een filmpje vind je de mogelijkheid voor het inbinden van een filmpje.

Inbinden van Vimeo, the Chase

Klik nu op Share (delen).

Inbinden Vimeo, opties

Nu verschijnt iets wat lijkt op de Youtube embed mogelijkheden. Klik nu op Customize embed options. Er verschijnen nu nog meer opties.

image

Ook hier kun het formaat instellen naar eigen wens. Het leuke van de Vimeo functie is dat je meteen kunt zien wat er gebeurd als je opties aanklikt. Advies is om in de Intro optie, zoveel mogelijk de vinkjes weg te halen. Verder moet je het een beetje naar eigen smaak inrichten.

Eindresultaat op de pagina

Youtube, Toren C

Vimeo, the Chase

Links: Vimeo

Johan van de Merwe

Johan van de Merwe is sinds 1985 werkzaam in de automatisering. In 2007 heeft hij Enovision GmbH opgestart, welke is gespecialiseerd in internet toepassingen, presentatie en coaching. Voor Websprinter is hij werkzaam als internet coach voor het MKB.

You may also like...

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *