All Collections
FAQ's and Troubleshooting
How to add YouTube as a section background
How to add YouTube as a section background

Use the YouTube embeded code to create a section's background video.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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.

  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 1.

    3. Set the Width to 100%.

    4. Set the Max Width to 100%.

    5. Set the Top Padding to 0.

    6. Set the Bottom Padding to 0.

  3. Go to Advanced Tab β†’ Position and choose Absolute position.

  4. Insert the Code module in this new Row.

  5. In the Code module, place the following HTML code:

    <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

  6. Replace the YouTube video ID hN2LfPgbY1g (in both instances) with the video ID you want to use.

Important Notes:

  1. Autoplay Policy: Modern browsers have restrictions on auto-playing videos with sound. The ?autoplay=1&mute=1 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 Layers View.

The result will be as per the video below:

Did this answer your question?