Defer YouTube/Vimeo Video module
Purpose and when to use
The Defer YouTube/Vimeo Video module shows a preview image and loads the player only after play. Use it instead of a standard Divi Video module when embeds would otherwise slow the first load.
- Divi 4: Add Defer YouTube/Vimeo Video
- Divi 5: Add the same module in the Visual Builder (existing Divi 4 modules can convert)
Global YouTube player defaults (autoplay, mute, colour, controls) live under Divi Engine → Nitro Settings → Defer Video Module. See the feature guide.
Quick setup workflow
- Add the module to the layout.
- Set Video Source to YouTube, Vimeo, or ACF Oembed.
- Enter the Video ID, or choose ACF fields when using dynamic video.
- Upload a preview image or let Nitro pull a thumbnail.
- Set aspect ratio and privacy-enhanced embed as needed.
- Style the play icon in Design.
- Save and test play, keyboard focus, and autoplay (if you use it).
Content tab
| Setting | Type | Default | What it does |
|---|---|---|---|
| Video Source | Select | YouTube | YouTube, Vimeo, or ACF Oembed |
| Video ID | Text | empty | ID from the video URL (the part after = or /). Hidden when source is ACF |
| ACF Field | Select | empty | ACF oembed field that contains the video. Shown when source is ACF |
| Preview Image (ACF) | Select | empty | ACF image field for the poster when source is ACF |
| Preview Image (upload) | Image | empty | Custom poster. Nitro can pull a YouTube/Vimeo thumbnail if you leave this empty |
| Image Alternative Text | Text | empty | ALT text for the preview image |
| Privacy-Enhanced Embed | Toggle | On | Uses YouTube nocookie and Vimeo do-not-track hosts when the visitor plays |
| Aspect Ratio | Select | 16:9 | 16:9, 4:3, 1:1, 21:9, or Custom |
| Custom Aspect Ratio | Text | empty | Ratio like 16:9 or padding percent like 56.25% |
| Play Button Label | Text | empty | Accessible name for the play control. Defaults to “Play video” |
Design tab
| Setting | Type | Default | What it does |
|---|---|---|---|
| Play Icon | Icon | Divi play icon | Icon shown on the preview |
| Play Icon Color | Color | #ffffff | Icon colour, including hover and mobile |
Standard Divi spacing, background, border, and overlay options also apply.
Global Nitro Settings (YouTube defaults)
These apply when the iframe loads. Configure them in Nitro Settings, not only on the module:
| Setting | Type | Default | What it does |
|---|---|---|---|
| Autoplay | Toggle | On | Start playback when the iframe loads. Pair with mute for browser autoplay |
| Mute on Autoplay | Toggle | Off | Mute so autoplay is more likely to succeed |
| Color | Select | Red | YouTube progress bar white or red |
| Controls | Toggle | On | Show player controls |
| Fullscreen | Toggle | On | Allow fullscreen |
| Loop | Toggle | Off | Loop the video |
| Rel | Toggle | On | Related videos after the current video ends |
Verify
- View the page logged out. The initial HTML should not include a heavy YouTube/Vimeo iframe.
- Click or tab to the play control and confirm the player appears.
- If autoplay is on, confirm mute is on as well.
Related guides
- Defer Video feature
- Fonts & Resource Hints — Preconnect YouTube or Vimeo
- Smart Image Loading