Elegant Themes

By default, 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:

1. Sizing → Enable the Use Custom Gutter Width.
2. Set the Gutter Width to <code>1</code>.
3. Set the Width to <code>100%</code>.
4. Set the Max Width to <code>100%</code>.
5. Set the Top Padding to <code>0</code>.
6. Set the Bottom Padding to <code>0</code>.

Go to Advanced Tab → Position and choose <code>Absolute</code> position.

Insert the Code module in this new Row.

In the Code module, place the following HTML code:

&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/hN2LfPgbY1g?autoplay=1&amp;mute=1&amp;controls=0&amp;loop=1&amp;playlist=hN2LfPgbY1g&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;

Replace the YouTube video ID <code>hN2LfPgbY1g</code> (in both instances) with the video ID you want to use.

1. Insert a new Row into the Section's layout.
2. Open the Row's settings, go to the Design Tab and make the following changes:
 1. Sizing → Enable the Use Custom Gutter Width.
 2. Set the Gutter Width to <code>1</code>.
 3. Set the Width to <code>100%</code>.
 4. Set the Max Width to <code>100%</code>.
 5. Set the Top Padding to <code>0</code>.
 6. Set the Bottom Padding to <code>0</code>.
3. Go to Advanced Tab → Position and choose <code>Absolute</code> position.
4. Insert the Code module in this new Row.
5. In the Code module, place the following HTML code:
 &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/hN2LfPgbY1g?autoplay=1&amp;mute=1&amp;controls=0&amp;loop=1&amp;playlist=hN2LfPgbY1g&amp;modestbranding=1&amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;
 
6. Replace the YouTube video ID <code>hN2LfPgbY1g</code> (in both instances) with the video ID you want to use.

1. Autoplay Policy: Modern browsers have restrictions on auto-playing videos with sound. The <code>?autoplay=1&amp;mute=1</code> in the URL ensures the video auto-plays in a muted state.
2. Performance: Background videos can affect your website's performance and loading time, especially on mobile devices.
3. Permissions: Make sure you have the right to use the video as a background for your website.
4. Because the Row that contains the Code module with the YouTube embedded code is positioned absolute, to easily edit other elements from the same section, use the Wirframe mode or the <a href="https://www.elegantthemes.com/blog/theme-releases/divi-layers-view" rel="nofollow noopener noreferrer" target="_blank">Layers View</a>.