The Complete Guide to Using SmartVideo with Divi Builder for WordPress Video Hosting

For Divi Builder users, SmartVideo offers you just the tool you need to provide modern, professional, and native video playback experience on your website.

We live in the age of powerful WordPress themes and page builders that help you to create any website under the sun. One such theme and visual page builder is Divi Builder by the cool folks at Elegant Themes.

If you're a sworn Divi Builder user, you'll love today's post. In a few minutes, we'll show you exactly how to use Swarmify's SmartVideo alongside Divi Builder.

Now you don't have to use Vimeo or YouTube's link-laden video players on your site. We offer you a clutter-free video player that looks absolutely amazing on your Divi-powered website.

What are the direct benefits?

• The SmartVideo video player doesn't contain third-party branding (hello, YouTube) and links that siphon away the traffic you work so hard to drive to your site. Now, you can brand your video players for that sharp and professional look and feel :)
• Our Video CDN and proprietary EdgeAI technology allows you to offer super-fast, buffer-free and error-free videos to your website visitors no matter where they are in the world. Your users will thank you.
• We use the same infrastructure streaming behemoths such as Netflix and Hulu use because we're fully committed to our mission. As a result, you enjoy instant-start and stall-free videos that help you to retain more visitors and boost your revenue.
• Our video encoding solution kicks ass, meaning your website visitors enjoy high-quality video playback regardless of the device they use. Say goodbye to sketchy videos that look terrible on different screens and resolutions.
• And so much more, as you'll learn later in the article :)

For now, let us learn more about the Divi Builder and how to integrate it with SmartVideo.

Spoiler Alert: You can add the SmartVideo code to your Divi Builder website manually, but you can now skip all the technical stuff with our new SmartVideo WordPress plugin. That means you can easily integrate SmartVideo with Divi Builder even if you can't code to save your life.

What is Divi Builder?

If you're new, Divi is a beautiful and powerful WordPress theme and visual page builder. Thanks to advanced visual builder technology, Divi helps you to create awesome WordPress websites quickly.

Divi ships with a ton of pre-made layouts that you can import to your WordPress install with a single click. On top of that, you have the Divi Visual Builder that allows you to customize your website by dragging and dropping elements.

That's right, you don't need previous coding knowledge to create a remarkable website with Divi. If that's not enough, you can even use two different layouts at the same time, giving you plenty of design freedom.

Divi comes with a ton of amazing features including:

• 40+ website elements such as call-to-action buttons, galleries, forms, blogs, sliders, testimonials etc.
• 800+ pre-made designs in different niches such as business, ecommerce, technology, health etc.
• Complete design control
• 100% responsive design with additional settings for all manner of devices
• Custom CSS control
• A large library of effects, transitions, and styles
• A million and one design options
• And so much more!

The best part is when you purchase Divi, you get access to other WordPress themes and plugins. Elegant Themes has over 700k customers, so you are in safe hands.

"Divi is the KING when it comes to ease of web design. What used to take a week takes a few hours and now we're all in with our personal goal to convert all our clients' websites to Divi." - Scott Lawrence

Divi is perfect for freelancers, agencies and website owners looking for a powerful, intuitive, and easy-to-use visual page builder. Whether you know how to code or not, Divi is an incredible website building tool.

That said, what's SmartVideo?

What's Swarmify SmartVideo?

For newcomers, Swarmify is a premier video acceleration service that we launched back in 2013 after days of rigorous development and testing.

Ours is a full-service video hosting platform complete with encoding, playback, video CDN, delivery and distribution toolsets. We are proud to work with a growing number of entrepreneurs from all walks of life.

We're passionate about what we do and work tirelessly to offer you videos that load instantly without buffering as is the norm with many video hosting sites such as YouTube, Wistia, and Vimeo.

Swarmify guarantees you 12x faster video playback and 8x lesser buffering than average video players in the market. We focus only on accelerating videos, and we are pretty good at it :)

Shameless plug aside, Swarmify is incredibly easy to integrate with several website building platforms including WordPress, Shopify, and Squarespace, among others.

While you can embed the SmartVideo video player on your WordPress site manually, you can save time using our revolutionary SmartVideo WordPress plugin.

The plugin is ridiculously easy to install and set up on your WordPress + Divi Builder website. You'll be delivering fast and high-quality video experiences to your visitors in less than 10 minutes!

With that background info, we are now ready for the fun part. In the next section, you'll learn how to use Swarmify with Divi Builder. In other words, we show you how to add a video to a typical Divi Builder layout.

How to Use Swarmify SmartVideo with Divi Builder

For the following section, you need to install and activate both the SmartVideo WordPress plugin and Divi. Installing and activating either SmartVideo or Divi is the stuff of fourth graders we don't expect you to run into any problems.

If you have Divi and SmartVideo ready, let us get down to work. For illustrations purposes, I am working with Divi's Web Agency layout that looks something like this:

Pretty neat, right? What I will do is add a SmartVideo video just below the main title, which reads "Full Service Web Design Agency." See image above.

Let's start!

In your WordPress admin dashboard, navigate to the page you'd like to edit. In our case, I'm editing the homepage shown in the screengrab above.

Open the page in the editor as usual. To start editing the above page in Divi Builder, simply click the Edit With The Divi Builder button, as we highlight below.

Doing so loads your page in the front-end. Next, click the Enable Visual Builder button, as shown below.

Next, scroll to the section you'd like to edit. In our case, we're adding a SmartVideo just below the main title at the top of the page.

When you mouse over the section, editing options appear. Simply click the plus (+) icon to add a new module:

Doing so opens a pop up that allows you to add a new Divi module:

Next, type "SmartVideo" in the search box, and click SmartVideo, as shown below.

After that, it's time to configure your video using the SmartVideo Settings tab. As you can see in the image below, there are a lot of options available to you:

In SmartVideo Settings, you can:

• Choose the video source - It can be the WordPress media library, YouTube, Vimeo or any other source (NB: If your YouTube video is set to private, change it to unlisted instead)
• Change the width and height of your video
• Set a custom poster for your video (SmartVideo defaults to the first frame of your video if you don't choose a custom poster image)
• Toggle on/off options such as Autoplay, Loop, and Muted
• Toggle on/off options such as video controls, responsive design, and inline video playback for iOS Safari browser
• Control the design of your video using Divi options, which include borders, sizing, spacing, filters, box shadowing, animations and much more :)

Once you're done, simple click the Save button, as we detail below:

Don't forget to save changes in the Divi Visual Builder after that:

Now if we view our sample site on the front-end, we see the new SmartVideo video player ready to rock the party:

To add a SmartVideo in any section, simply repeat the process. Launch the page you'd like to edit in the Divi Visual Builder, click the plus (+) icon to add a new module, choose the SmartVideo module, add your options, and save your changes.

As simple as A, B, C !

Adding SmartVideo videos to your Divi website has never been easier. You can forget all about YouTube branding, recommended videos and links that steal your traffic.

Besides, you can fully customize the SmartVideo video player to match your website style.

What's more?

If you already have videos on your Divi website, SmartVideo converts them automatically as soon as you configure our plugin.

Make sure you turn on Optimize background and existing videos in your SmartVideo settings.

How?

In your WordPress admin dashboard, navigate to SmartVideo > Settings. Next, toggle Optimize background and existing videos:

After that, click the Save Settings button at the bottom of the page:

And that's it - SmartVideo will convert all your existing videos automatically.

That's right; you don't have to do anything else :)

How to Customize SmartVideo Video Player

Before we get to the end, let us cover some options to customize the SmartVideo video player.

Changing the Video Player's Shape & Color

By default, the SmartVideo video player uses a yellow hexagon play button. You can, however, change the shape and color to suit your website. Here's how.

In your WordPress admin dashboard, click SmartVideo:

Once you're in the SmartVideo dashboard, click the Settings tab, as shown below.

On the Settings screen, scroll down and you'll find sections that allow to change the play button shape and color:

Here are more notes about the screengrab above.

1. To change the player button shape, choose Default, Rectangle or Circle from the drop-down menu.
2. Choose a custom color for your player button.
3. Click the Save Settings button to save your changes.

Now you can enjoy your newly customized player button :)

More Advanced Options

SmartVideo comes with more options to add closed captions from YouTube sources, toggle on/off upload acceleration, switch to alternate layouts, add a custom watermark, and monitize your videos with ads.

Here's how to find the above options on the SmartVideo Settings page. To add closed captions fom YouTube sources, check the box shown below and remember to save your settings:

To launch more options, scroll down and click Advanced Options, as we highlight below.

Under the Advanced Options section, you have the following options:

1. Toggle alternate layout method on or off, which helps if you are experiencing odd video sizing or full-screen issues.
2. Toggle upload acceleration on or off if you're having trouble with uploads.
3. Set a custom watermark/logo on your video player.
4. Add VAST Ad URL, so you can sell ads from Adsense, Spotx, DFP and so on.

Pro Tip: Always remember to click the Save Settings button at the bottom to save your changes.

Final Words

Divi is a wonderful WordPress theme and visual page builder. It helps you to create beautiful websites before the next guy finishes a sandwich. The process is as simple as importing a layout and customizing it until you drop.

The drag-and-drop functionality makes customizing any layout as easy as pie. You don't need coding skills whatsoever, plus you edit your website in the front-end, seeing your changes take effect in real-time.

If you use videos on your website, SmartVideo helps you to deliver fast, buffer-free, and professional video experiences on your site. Even if you host your videos on YouTube or elsewhere, our clutter-free video player eliminates third-party branding and links.

Divi + SmartVideo is a winning combination. In your hands, you now have the perfect combo to build websites quickly and offer unparalleled video experiences to your website visitors, or web design clients.

Plus we don't have bandwidth or storage limits like other services, meaning you can host unlimited videos at pocket-friendly prices :) Give Divi + SmartVideo a try today, and enjoy fast and high-quality videos without breaking a sweat.

Let us know how it goes. Happy building!