How to Use SmartVideo with Divi: Complete Setup Guide (2026)

The short answer: SmartVideo is a WordPress plugin that replaces Divi's native video module with a faster, ad-free player. You can drop it into any Divi layout as a dedicated module or paste a shortcode into a Code module. Either method works in under two minutes on Divi 4 and Divi 5.

Divi, built by Elegant Themes, powers over 800,000 websites as of 2026, making it one of the most widely used WordPress builders alongside Elementor (Elegant Themes, 2025). Its Visual Builder lets you edit pages live with a side panel of modules, and Divi 5 added a rebuilt module picker and faster preview rendering.

Divi also ships with over 2,000 pre-built layout templates organized into hundreds of layout packs, which means most Divi sites start from a template where the default video placement uses Divi's native Video Module (Elegant Themes Layout Library, 2025). Swapping those native modules for an accelerated player is usually a search-and-replace operation rather than a full rebuild.

But there's a catch when it comes to video. Divi's built-in options - the native Video Module with YouTube embeds or the WordPress Media Library - each come with significant trade-offs. YouTube injects ads and "related videos" that pull viewers away from your site. Self-hosted videos from the Media Library lack adaptive streaming, which means buffering on slower connections and a hit to your Core Web Vitals.

In our testing, a single standard YouTube embed adds 1-3 seconds to page load time on a typical Divi landing page (full breakdown here). That matters because 53% of mobile users leave a page that takes more than 3 seconds to load (Google, 2025).

This is a bigger deal than most Divi sites realize. WordPress powers roughly 43.5% of all websites, and Divi sits in the top tier of WordPress builders, so the quality bar for Divi video performance shapes a meaningful slice of the web (W3Techs, 2025).

This guide walks you through two methods for adding SmartVideo to your Divi site: the dedicated module (the fastest path for most pages) and the shortcode approach (the most flexible option when the module doesn't fit, like inside Theme Builder templates). It also covers customization options, lazy loading behavior, and fixes for the common issues that trip people up on first install.

What do you need before you start?

Before you set up SmartVideo in Divi, make sure you have these in place:

How do you install and activate SmartVideo?

If you already have SmartVideo installed and configured on another WordPress site, skip ahead to Method 1. Otherwise, here's the quick setup that takes about two minutes.

Step 1: Install the plugin

In your WordPress dashboard, go to Plugins → Add New and search for "SmartVideo." Click Install Now, then Activate. The plugin has no dependency on a specific Divi version and activates cleanly alongside Divi's core theme.

Step 2: Enter your API key

After activation, go to Settings → SmartVideo in your WordPress sidebar. Paste your Swarmify CDN key into the API key field and click Save Changes. You can find your CDN key in the SmartVideo dashboard after signing up for a free trial - no credit card is required to issue the key.

Step 3: Customize the player (optional)

Before you start adding videos to your pages, take a minute to set your player defaults. In Settings → SmartVideo → Player Appearance, you can pick an accent color for the play button and choose the button shape (circle, rounded square, or pill). These defaults apply to every SmartVideo player on your site, so you only configure them once and every Divi layout inherits the same look.

How do you embed video using the SmartVideo module in Divi?

The module method is the simplest approach and the one we recommend for most users.

Once SmartVideo is installed, a dedicated SmartVideo module appears in Divi's module picker. It works just like any other Divi module - insert, configure, save. The same module shows up in Divi 4's classic Builder and Divi 5's Visual Builder with the Insert Module dialog.

Step 1: Open the Divi Visual Builder

Navigate to the page you want to edit and click Enable Visual Builder at the top admin bar. If you're building a new page, create one first and then launch the Visual Builder from the page editor or directly from the front end.

Step 2: Find the SmartVideo module

In the Divi 5 Visual Builder, click the + button on any row to open the Insert Module dialog. Type "SmartVideo" in the search bar. You'll see the SmartVideo module surface in the results with a clean module icon. If you don't see it, make sure the SmartVideo plugin is activated and you've entered your CDN key (see the installation section above).

Step 3: Insert the module and configure the video source

Click the SmartVideo module in the Insert dialog to drop it into the selected row. The module settings panel opens on the left with a video configuration panel. You have three source options that cover every common workflow on a Divi site.

• YouTube URL: Paste a standard YouTube video URL. SmartVideo will automatically pull the video, strip out ads and related video suggestions, and deliver it through its CDN.
• WordPress Media Library: Click Select Video to choose a video file you've already uploaded. SmartVideo will handle encoding and delivery so your Divi site doesn't have to serve the raw MP4 from its own server.
• External URL: Paste a direct link to an .mp4 file hosted on Amazon S3, Google Cloud, Dropbox, or any other service. SmartVideo downloads, encodes, stores, and delivers it from its global network.

Step 4: Preview and save

Use Divi's preview mode (the phone, tablet, and desktop icons at the bottom of the Visual Builder) to check the video on each responsive breakpoint. The player should appear with the clean SmartVideo look - no YouTube branding, no ads, no "related videos" overlay. When you're happy with the placement, click Save at the bottom of the builder.

How do you embed SmartVideo using a shortcode?

The shortcode method is for cases where you need finer control than the module panel offers.

Use it when you are building inside Divi's Theme Builder (for global headers, footers, or post templates), working inside a template where modules behave unpredictably, or you simply prefer typing exact attributes instead of clicking through a visual interface.

When to use shortcodes instead of the module

Shortcodes suit a few specific situations where the module approach gets in the way. Reach for them inside Divi Theme Builder templates that need a video in a global layout, when you want to set attributes like width, height, or poster directly in the embed code, when you are embedding videos across multiple builders and want a consistent format, or when you prefer the precision of typing exact parameters over clicking through a visual interface.

Step 1: Build your shortcode

A basic SmartVideo shortcode for a YouTube source looks like this, and the same syntax works for Media Library uploads or external .mp4 URLs hosted anywhere:

[smartvideo src="https://www.youtube.com/watch?v=VIDEO_ID" width="100%" height="auto"]

[smartvideo src="https://yoursite.com/wp-content/uploads/video.mp4" width="100%" height="auto"]

Beyond src, width, and height, you can pass optional attributes to control poster images, autoplay behavior, muted playback, and looping. The table below lists the attributes we reach for most often, the values they accept, and how each one affects the rendered SmartVideo player on the page.

Step 2: Add a Code module in Divi

In the Divi Visual Builder, open the Insert Module dialog and search for the Code module. Drag or click it into the section where you want the video. Avoid the Text module for this - Divi's Text module sanitizes some markup, and shortcodes embedded inside it can behave inconsistently between Divi 4 and Divi 5.

Step 3: Paste the shortcode

Open the Code module settings and paste your SmartVideo shortcode into the content field. Divi will render a placeholder in the Visual Builder preview, and the actual video player will appear on the live page once you save.

Step 4: Preview and adjust

Use Divi's responsive preview modes to check the video on the live page. Adjust the width and height attributes in the shortcode, or use Divi's spacing and sizing controls on the Code module wrapper to fine-tune the layout at each breakpoint.

Which player settings are worth customizing?

Once your video is in place, SmartVideo gives you several options to fine-tune the viewing experience. These settings live in the SmartVideo plugin settings (Settings → SmartVideo in WordPress) and apply globally, though some can be overridden per-embed.

Player appearance

SmartVideo's player is intentionally minimal - no logos, no ads, no branding overlays, and no watermarks on any of the playback controls. The player chrome inherits your site's look automatically, which keeps your Divi design system consistent edge to edge. If you're used to the YouTube player taking visual control of your page, this is a noticeable difference.

This distinction has real business consequences. A recent Wyzowl survey found that 89% of marketers consider video a central pillar of their strategy and 91% of businesses now use video as a marketing tool, which means the branded player on your Divi page is fighting for attention against every other brand the viewer has seen that week (Wyzowl State of Video Marketing, 2025).

Compare the experience: a standard YouTube embed on a Divi page comes with the YouTube logo, a "Watch on YouTube" link, and related videos that promote competitor content when the video ends. SmartVideo strips all of that out. Your visitors stay focused on your content.

Responsive sizing

Both the module and shortcode methods produce fully responsive video players by default. Set the width to 100% and SmartVideo will fill the available Divi row or column width while maintaining the correct aspect ratio.

This matters especially in Divi, where you can have complex row and column layouts with different content on desktop, tablet, and phone breakpoints. A video in a two-column row will scale correctly, and it adapts on mobile when Divi stacks the columns vertically. In our testing, no extra CSS is needed - the responsive behavior works out of the box with Divi's default breakpoints and custom breakpoint overrides.

Lazy loading for faster pages

One of the biggest advantages of SmartVideo over standard embeds is automatic lazy loading. Instead of loading the entire video player and its resources when the page loads, SmartVideo waits until the viewer scrolls near the video before initializing the player.

Why this matters: Google's Core Web Vitals thresholds rate a page as having "good" Largest Contentful Paint only when LCP stays under 2.5 seconds, and a single eager-loaded video iframe can push that number past 4 seconds, which Google classifies as "poor" (web.dev LCP guide, 2025). Lazy loading pulls the eager iframe out of the critical rendering path entirely.

This is significant for Divi sites, which tend to be design-heavy with multiple sections, parallax backgrounds, and animated elements above and below the video. If you have a video below the fold - say in a testimonial section or a "How It Works" block - lazy loading means that video won't drag down your initial page load time. We've measured Largest Contentful Paint improvements of 30-50% on Divi pages after switching from standard YouTube embeds to SmartVideo with lazy loading enabled.

The broader context is striking: the HTTP Archive Web Almanac has tracked a steady rise in median video bytes per page for years, with the top 10% of pages shipping multiple megabytes of video assets on initial load alone (HTTP Archive Web Almanac, 2022). For a Divi site that cares about mobile conversion, lazy loading is the difference between shipping those bytes up front and shipping them only when a viewer actually scrolls into view.

Multi-builder compatibility

If you're running a mixed WordPress stack - some pages built with Divi, others with Elementor, Beaver Builder, or the native Gutenberg editor - SmartVideo installs once and works across all of them. The same plugin exposes a dedicated module inside each builder, so your team can pick whichever editor fits the page without re-learning the video workflow.

That also means the player appearance settings you configured earlier (accent color, button shape, lazy loading) apply globally. A video embedded in a Divi hero section uses the same player as a video dropped into a Gutenberg post body, so the experience stays consistent no matter how the page was built. For parallel walkthroughs on the sibling builders, see our Elementor guide and Beaver Builder guide.

What goes wrong most often and how do you fix it?

Most Divi setups go smoothly, but a handful of gotchas come up often enough that it's worth listing them. Here are the issues we see most and how to fix them.

SmartVideo module not appearing in Divi

You search for "SmartVideo" in the Divi module picker and nothing shows up, even though the plugin is installed. Four things cause this in roughly that order of frequency, and all of them take under a minute to verify.

• Make sure the SmartVideo plugin is activated (Plugins → Installed Plugins - look for the green "Active" status)
• Check that you've entered a valid CDN key in Settings → SmartVideo
• Clear your browser cache and reload the Visual Builder - Divi caches the module list
• If you're on Divi 5 beta, the Insert Module dialog occasionally indexes plugins lazily - close and reopen the builder to force a refresh

Video not playing on mobile

Video works on desktop but shows a blank space or frozen thumbnail on phones. This is almost always one of three issues, and the first one trips up about 80% of the Divi users we help with mobile video problems.

• If you're using autoplay, the video must be muted to autoplay on iOS and Android - this is a browser policy introduced in Chrome 66 in 2018, not a SmartVideo limitation
• Check that your Divi section doesn't have "Disable on Phone" enabled in the module's Advanced → Visibility settings
• Verify the video URL is accessible - some corporate firewalls block video CDN domains

Video loads slowly or buffers

The SmartVideo player appears but the video takes several seconds to start, or it buffers mid-playback. Four things typically cause this: fresh uploads still encoding, non-standard source formats, rate-limited external URLs, or unrelated page-weight problems on the Divi page itself.

• If you uploaded a very large file (over 500MB), allow time for SmartVideo to process and encode the video - transcoding can take a few minutes for long or high-resolution files
• Check that your source file is a standard format (.mp4 with H.264 encoding is ideal)
• If using an external URL, make sure the source server isn't rate-limiting downloads
• Run a PageSpeed Insights test to rule out other page weight issues unrelated to the video - Divi's parallax sections and animated modules can pile up their own LCP cost

Video appears but Divi preview is blank

The video plays on the live page, but the Visual Builder preview shows an empty block where the SmartVideo module should render. This is almost always a builder preview quirk rather than a broken embed, and the player works correctly on the public-facing page. Confirm by loading the page in a private browsing window.

• Reload the Visual Builder with Ctrl+Shift+R (or Cmd+Shift+R on Mac) to clear the preview cache
• Switch Divi to wireframe mode to confirm the module is present in the layout, then switch back to visual mode
• If you're using a nested row layout, check that no parent row has overflow: hidden clipping the video element

Divi Visual Builder is slow after adding video

The Divi Visual Builder becomes sluggish after placing a SmartVideo module. This happens because the Visual Builder preview loads the video inline as you edit, which burns memory and CPU on every auto-save. The fix is to keep the editor in a lower-overhead preview mode while you build the page.

• Switch Divi to wireframe mode temporarily while building out the rest of the page - the video still renders on the front end, just not inside the builder
• Limit the number of video modules on a single page - if you need a video gallery or hosting page, consider using a separate Divi template section that loads dynamically

How do I get the most out of SmartVideo in Divi?

After working with Divi and SmartVideo for years, here are the patterns that consistently produce strong results in our experience.

A quick piece of context before the checklist: mobile is where most of this now lives. Over 60% of global web traffic comes from mobile devices (Statista, 2025), and video is heavily weighted toward that same traffic, so prioritizing mobile playback is not optional for serious Divi sites.

Google has also made Core Web Vitals a confirmed ranking signal for 100% of mobile search results since the Page Experience update rolled out, which means a video that pushes LCP past the 2.5-second threshold directly affects how your Divi pages rank for mobile queries (Google Search Central, 2021). Picking a fast player is not only a UX concern, it is an SEO concern.

• Put your most important video above the fold. If you have a product demo or explainer video, place it in the hero section or the first visible Divi row. SmartVideo's lazy loading is smart enough to load above-the-fold videos immediately while deferring everything below.
• Use custom thumbnails. A well-designed poster image gets more clicks than a random frame from the video. Upload a custom thumbnail through the SmartVideo module settings or the poster shortcode attribute.
• Use Divi Theme Builder for global video placements. If you're using the same video in a header, footer, or post template, build it once in a Theme Builder template with the shortcode method. That keeps the video consistent across every page without copy-pasting modules.
• Keep videos under 10 minutes for marketing pages. From analyzing our platform data across millions of video views, we know engagement drops sharply after the 8-minute mark on most business websites - an observation echoed in Wistia's own engagement research showing sharp dropoffs past the 2-minute mark on short explainers.
• Test with mobile page speed tools. Most of your Divi traffic is probably mobile. Always check how your video pages perform on a mobile connection, not just desktop.
• Combine with Divi's responsive breakpoints. Use Divi's phone/tablet/desktop visibility settings to show different video sizes or layouts per breakpoint if needed.

What do people ask most about SmartVideo and Divi?

A few questions come up repeatedly in support tickets and onboarding sessions. Here are the ones worth bookmarking before you go live.

Where do you go from here?

You can keep the existing YouTube URLs or Media Library files you already use in Divi. SmartVideo sits between the source and the viewer.

The plugin handles encoding, CDN delivery, and a clean player experience, so you do not have to choose between YouTube's distractions and self-hosting's performance problems on your Divi site.

If you're building with Divi and other page builders too, the same SmartVideo plugin works with Elementor, Beaver Builder, and Brizy - one install covers everything.