Youtube video background toevoegen in Divi

Custom code, Divi thema, Theme Builder, video, Webdesign tips

Video’s kunnen powerful zijn in een website, vooral als je die op home plaatst en de bezoeker in een korte tijd wilt triggeren. Maar wat nu een probleem is met Divi, dat achtergrondvideo streamen vanaf YouTube of Vimeo op dit moment nog niet zo eenvoudig is. Het had zo simpel moeten zijn maar er zit een bug in het systeem dat maatwerk vereist om het toch mogelijk te maken. Als je veel met video werkt kan het een reden zijn om eens te kijken naar een ander thema zoals Elementor of bijvoorbeeld Enfold.

Ik leg je in onderstaande stappen uit hoe je het probleem kunt oplossen

Eerst laat ik zien hoe je het probleem kunt reproduceren

  • Open een pagina, bericht, of een project met de visual builder
  • Selecteer een section (Blauw) of row (groen) waar je de achtergond video wilt tonen.
  • selecteer het tandwiel
  • En klik op de content tab en ga naar het achtergrond / background element

Klik “Add Background Video” en selecteer invoegen via URL

Wat je zou verwachten is dat als je op “invoegen in bericht” zou klikken dat de youtube film prima in de sectie of row als achtergrond wordt ingeladen. Maar wat je zult zien is dat er een error verschijnt:

Het zelfde geld voor video’s vanaf Vimeo. Ik heb dit getest met WordPress 5.7.4 en Divi 4.9.2. Ik verwacht dat Divi dit een keer gaat fixen. Maar tot die tijd zullen we naar een alternatief moeten kijken om toch background video’s te implementeren.

Oplossing voor background video in Divi

Dit is manier hoe je een achtergond video van YouTube toch kunt laden in Divi:

  1. Open de visual builder en voeg een code block toe.
  2. Maak het codeblock 100% breed
  3. Maak de row 100% breed
  4. Maak ook de section 100% breed
  5. Go naar Youtube en embed de insluitcode

6. Klik op kopieren
7. Plak deze embedcode in je Divi code block en pas het script aan met de groene tekst:

src=”https://www.youtube.com/embed/RlLSVBBAeag?autoplay=1

Sla het block op en test of nu de video juist wordt geladen.

Nu kun je met een negatieve top margin het code blok een aantal pixels omhoog trekken en de Z-Index op -100 zetten dus achter een aantal andere elementen laten staan. Dus dan krijg je het effect dat de video achter een tekst of blok kan draaien.

Hier zie je een voorbeeld: https://bijpieter.nl/video-achtergrond-in-divi/https://bijpieter.nl/video-achtergrond-in-divi/

Andere tips die misschien ook interessant zijn

Voeg een WhatsApp widget toe aan je website

Wie gebruikt er geen WhatsApp? Maar toch communiceren de meeste organisaties via de website nog met formulieren. Waarom zorg je er niet voor dat je voor je website bezoekers bereikbaar bent via WhatsApp? Zo verlaag je de drempel om contact op te nemen!

Enthousiast geworden over Divi

Als je via onderstaande link het thema koopt, krijg ik een kleine vergoeding van Divi. Dit kost jou niets extra, maar je helpt mij om meer tips en inzichten over Divi te blijven delen. 

Divi WordPress Theme

Heb je geen tijd om er zelf mee aan de slag te gaan?

Mogelijk kan ik je helpen!
Stuur een berichtje naar opdekoffie@bijpieter.nl