How to Add a YouTube Video Background in Divi (2026)

The first time a client asked me for a YouTube video behind their hero in Divi, I opened the section settings, looked for the field, and there was none.

Divi will not take a YouTube link as a background. There is no setting for it.

Its built-in video background only accepts a file you upload, an MP4 or WebM. Paste a YouTube URL and nothing happens. Elegant Themes' own docs say the same: only self-hosted videos work as backgrounds.

So you build it by hand. I have set this up on a few sites now, and the trick that holds up is one Code module and a bit of CSS.

Here is how it works, the looping bug that catches everyone, and why I usually talk people out of YouTube and into a self-hosted file.

Can Divi use a YouTube video as a background?

Not through any setting. This is the part the recycled guides skip: there is no "paste your YouTube URL here" box in Divi's background tab.

The video background field is for self-hosted files only. To get a YouTube clip back there, you fake it. You drop the YouTube player into the section yourself with a Code module, push it behind everything, and float your real content on top.

It is not a Divi feature. It is a layout you assemble, and the whole thing rests on one idea: layers.

The three ways to do it, compared

There are three honest routes. Pick by how much control you want and how much you care about speed.

I reach for the Code module on most builds. But if speed is the priority, scroll to the self-hosted option first, because that is the one I actually recommend more often than not.

Method 1: the Code module workaround

This is the real answer to the search. It needs no plugin and works on any Divi section.

Step 1

01

Add a section and a Code module

In the Divi Builder, add a standard section with a single-column row. Inside that row, add a Code module. This is where the YouTube player will live.

Leave the section's own background plain. You are not using the background tab at all here.

Step 2

02

Paste the YouTube iframe

Open your video on YouTube, click Share, then Embed, and copy the iframe.

Paste it into the Code module, then edit the src URL so it behaves like a backdrop instead of a player.

html

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0&showinfo=0&modestbranding=1"
  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Swap both copies of VIDEO_ID for your real video ID, the bit after watch?v= in the YouTube URL.

Step 3

03

Set the five background parameters

The parameters on the end of that URL are what turn a normal embed into a silent, looping background. Miss one and it breaks.

The one that catches people is loop=1. On a single video it does nothing on its own. YouTube only loops one video when you also add playlist=VIDEO_ID with the same ID. Forget it and your video plays once, then freezes on the last frame.

position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
min-width: 100%; min-height: 100%;
width: 177.77vh; height: 56.25vw;
z-index: 0;
pointer-events: none;

The honest catch with this method: you are loading the full YouTube player on page load. That is real weight, and it shows up in your speed scores. More on that below.

Method 2: a background plugin, if you would rather not code

If editing iframes and CSS is not your thing, a plugin adds YouTube backgrounds as a proper setting. The one I would use is Advanced WordPress Backgrounds by nK. It is free, on the official repository, and it actually handles YouTube, Vimeo and self-hosted video backgrounds with overlays and parallax built in.

It adds its own block and works alongside Divi, so you place its block in a Divi section and pick YouTube as the background type. The trade-off is the same as any plugin: one more thing to keep updated, and you are still pulling YouTube's scripts, so it is no lighter than the Code module on speed.

Avoid the abandoned ones. A few old tutorials still point at jQuery-era plugins that have not been updated in years. On a current WordPress and PHP version those break, so stick to a plugin that shows a recent "tested up to" version.

Method 3: self-host the video, the one I usually recommend

Here is the position I land on most of the time: skip YouTube entirely and use Divi's real video background with your own file.

This is the only route that uses Divi's built-in feature the way it was meant to be used. Open the section, go to the Background tab, click the video icon, and upload an MP4 (add a WebM too for wider support). No code, no layering, no looping trap.

The win is speed. You load one small video file instead of the entire YouTube player and its tracking scripts. For a background loop, where nobody needs the controls or the "watch on YouTube" link anyway, that is pure upside.

The steps to do it well:

• Keep the clip short, 8 to 12 seconds, looping. A background does not need a full video.
• Compress hard. Aim for a file under a few megabytes. A 40 MB hero video will wreck your load time.
• Don't serve the file off your own server. Host it on a proper video CDN so it is not eating your origin bandwidth.
• Divi mutes and loops it for you, so there is no parameter to remember.

Where I host the video: Gumlet

The piece people skip is where the file lives. Drop a heavy MP4 in your media library and it is served off your own server, uncompressed, with no edge delivery. That is the part that actually hurts your scores.

I host these on Gumlet. It transcodes whatever you upload, compresses it properly, and delivers it from the edge closest to the visitor, so the video starts fast instead of dragging your origin down. You get a clean embed and a real CDN without building the pipeline yourself.

There is a permanent free plan, so you can host a short background loop at no cost and only pay once you are delivering real volume. For a single hero video, the free tier is plenty.

The only reason to pick YouTube over a self-hosted file is if you genuinely cannot host it, or you want a third party to carry the bandwidth for a very heavy clip.

Will a video background slow my Divi site down?

Yes, if you are not careful, and this is where I spend most of my time on these builds. A video header is the heaviest thing on the page.

A YouTube embed pulls in the player and its scripts whether the visitor watches or not. A fat self-hosted MP4 can be tens of megabytes. Either way it competes with your real content for load time, and Core Web Vitals notice.

Site speed is an engineering problem, not a plugin you install. The fixes are boring and they work: compress the file, keep it short, lazy-load anything below the fold, and never let a video be the thing that blocks your largest contentful paint. If a video header is tanking your scores, that is a fixable problem, not a reason to give up on the effect.

What about mobile?

Be honest about phones. Mobile browsers are strict about autoplay and protective of data, and a video background hurts load time most exactly where connections are slowest.

My default: hide the video on mobile and show a static fallback image instead. Divi's visibility settings let you disable the Code module or the video section on phone, and you drop in a still frame as the background there. Visitors on a phone get a fast, sharp image; visitors on desktop get the motion. Nobody gets a janky, half-loaded player.

Final take

Divi cannot take a YouTube link as a background, full stop. You either layer it in by hand with a Code module, lean on a maintained plugin like Advanced WordPress Backgrounds, or self-host a compressed MP4 and use Divi's native feature.

The Code module method is the one people search for, and it works once you remember the playlist parameter for looping and the mute parameter, since browsers block autoplay with sound on. But nine times out of ten, a short, well-compressed self-hosted video is the better call. It gives you the same effect without dragging the whole YouTube player onto every page load.

Whichever route you pick, compress the file, hide it on mobile, and keep an eye on your speed. The effect is only worth it if the page still loads fast.