Adding a YouTube video as a background to your website sections can significantly enhance your site's visual appeal and engagement.
Using a dynamic video background can convey your message more effectively and create a more immersive experience for visitors.
This article will guide you through the steps to seamlessly integrate a YouTube video as a section’s background in Divi, ensuring it plays smoothly and enhances your site’s design.
Only self-hosted videos can be used as video backgrounds. However, you can create a section with a YouTube video background by following the steps below.
Insert a new Row into the Section's layout.
Open the Row's settings, go to the Design Tab, and make the following changes:
Sizing → Enable the Use Custom Gutter Width.
Set the Gutter Width to
1.Set the Width to
100%.Set the Max Width to
100%.Set the Top Padding to
0.Set the Bottom Padding to
0.
Go to Advanced Tab → Position and choose Absolute position.
Insert the Code module in this new Row.
In the Code module, place the following HTML code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/hN2LfPgbY1g?autoplay=1&mute=1&controls=0&loop=1&playlist=hN2LfPgbY1g&modestbranding=1&showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Replace the YouTube video ID
hN2LfPgbY1g(in both instances) with the video ID you want to use.
Important Notes:
Autoplay Policy: Modern browsers have restrictions on auto-playing videos with sound. The
?autoplay=1&mute=1in the URL ensures the video auto-plays in a muted state.Performance: Background videos can affect your website's performance and loading time, especially on mobile devices.
Permissions: Make sure you have the right to use the video as a background for your website.
Because the row containing the Code module with the YouTube embedded code is positioned absolute, you can easily edit other elements from the same section using the Wireframe View or the Layers View.
The background video will be as shown in the GIF below:
