Als je een YouTube of video van een ander videoplatform wilt invoegen (embedden) in je WordPress website, dan gaat dit artikel je zeker helpen.

Embed (YouTube) video in WordPress

Het invoegen van een (YouTube) video in WordPress is erg eenvoudig. Je kunt gewoon de video-url kopiëren en plakken in de WordPress editor van je pagina of post die je aan het bewerken bent. Je moet er alleen op letten dat de link op een eigen regel staat, zoals hier:

Dit is een coole YouTube video: 

[De (YouTube) video-url hier plakken, op een eigen regel!]

Cool toch?

WordPress zet de link vervolgens om in de juiste HTML voor het betreffende videoplatform waar je een video van wilt invoegen (YouTube, Vimeo etcetera). Dit is mogelijk omdat WordPress gebruikt maakt van oEmbed:

The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content from site B.

Alle videoplatformen die ondersteund worden en meer informatie over deze functionaliteit van WordPress vind je in het WordPress Codex artikel Embeds.

Veel voorkomende problemen met video’s in WordPress

Zoals we hierboven hebben uitgelegd is het erg eenvoudig om een YouTube (of andere) video toe te voegen in WordPress. Dan is het tijd om het resultaat te bekijken op je website. Bij mij zag dit er als volgt uit:

YouTube WordPress video te groot

Op deze pagina is de YouTube video in WordPress te groot, de breedte van de pagina (zie tekst onder de video) is kleiner dan de video zelf.

WordPress YouTube video te klein

De YouTube video in WordPress is te klein ten opzichte van de breedte van de pagina (kijk maar naar de tekst!).

Wat zien we nou op bovenstaande afbeeldingen?

De YouTube video die we zojuist hebben ingevoegd passen zich duidelijk niet aan naar de breedte van de pagina is waar ze worden ingevoegd. Zoals we weten uit voorgaande uitleg zet oEmbed onze YouTube link die we in de WordPress editor geplakt hebben om in de juiste HTML op de website. Als we daar naar kijken zien we het volgende:

<iframe src="http://www.youtube.com/embed/ZR8oXE9feDk?feature=oembed&amp;wmode=opaque" width="770" height="433" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Uit de code blijkt dus dat de video altijd een fixed width heeft van 770 pixels. Dat gaat niet werken! Op mijn pagina van 940 pixels breed (zonder sidebar) is de YouTube video te klein, en op mijn pagina van 620 pixels (met sidebar) breed is de YouTube video te klein zoals we reeds zagen op mijn afbeeldingen.

Het blijkt echter dat de oEmbed functionaliteit wel prima rekening houden met hoe breed een pagina is om de (YouTube) video vervolgens dus “full width” in te kunnen voegen. Je thema moet dan deze “content width” wel gespecificeerd hebben in de code van het WordPress thema, dit wordt uitgelegd in het artikel How to Set oEmbed Max Width in WordPress 3.5 with $content_width. Met de code die in dit artikel aangedragen wordt kun je echter maar één breedte aangeven in pixels. Dit is voor mij geen oplossing omdat mijn “content width” voor de pagina zonder sidebar 940 pixels is, en voor de pagina’s met sidebar 620 pixels. Ik moet dus een oplossing hebben waarbij de video’s altijd 100% de breedte hebben van de pagina.

Responsive (YouTube) video plugin

Gelukkig ben ik niet de enige die YouTube video’s wil invoegen die zich automatisch aanpassen naar de breedte van de pagina. Dit kan belangrijk zijn als je, zoals in mijn geval, pagina’s hebt met verschillende breedtes. En ook bij responsive of fluid websites zijn de paginabreedtes continue anders. De oplossing is de Advanced Responsive Video Embedder plugin. Door toepassing van slimme CSS en Javascript zorgt deze plugin ervoor dat de video’s altijd op volledige breedte van desbetreffende pagina wordt weergegeven. Natuurlijk zijn er ook nog andere alternatieven die je bijvoorbeeld in het lijstje 16 Cool Responsive WordPress Plugins for Images and Videos kunt vinden.

Geef een reactie

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