The Complete Beaver Builder + Swarmify Guide for Video Hosting

Do you use Beaver Builder? If so, Swarmify helps you to deliver fast, buffer-free, and professional video experiences on your website without breaking the bank.

Powering over one million websites, Beaver Builder is a popular drag and drop page builder among WordPress users.

The page builder is incredibly easy to use yet comes with a unique set of features that have endeared it to beginners and experts alike.

For instance, I got the following page going in less than five minutes:

It's basically a ready-made template that you can import in a matter of seconds. Next, replace the images and text with your content, and you're up and running.

If you don't like Beaver Builder templates, you're free to start with a blank page. Then drag and drop content blocks into place and visually forge the rest of your page without writing HTML or struggling with shortcodes.

In the past, we covered other page builders such as Divi, Elementor, Brizy, and Webflow. Please check out the guides whenever you can :)

Today, we show you exactly how to use Beaver Builder and Swarmify to deliver fast, stall-free, and professional video experiences on your website.

Without further ado, let us start since there is a lot to learn.

What is Beaver Builder?

Before anything, let us learn more about Beaver Builder for the sake of the first timer among us.

Beaver Builder is a premium WordPress page builder. The tool helps you to create responsive WordPress pages visually.

That means you create pages by dragging and dropping content blocks. You don't need prior coding experience to use the Beaver Builder page builder.

That is great news for beginners and professionals since you can streamline your workflow and save a lot of time as you build websites.

The biggest names in WordPress love and trust Beaver Builder:

The best part about Beaver Builder is the fact it's so remarkably easy to use that you'll be building WordPress websites in a matter of hours and not days.

And being easy to use doesn't mean Beaver Builder is not as powerful as other page builders. It is a robust page builder thanks to an extensive list of nifty features.

Features, you say?

Yes, Beaver Builder boasts of the following features:

• 100% responsive design meaning your pages will look great across multiple devices
• Beaver Builder Theme Framework for all your WordPress projects
• Dozens of pre-made templates to create landing pages, home pages, content pages, etc.
• Beaver Builder Drag and Drop page builder
• Oodles of content blocks to add text, images, buttons, headings, videos, etc.
• A ton of WordPress widgets, including the SmartVideo widget
• Global settings
• Custom HTML, CSS, and JavaScript if necessary
• Keyboard shortcuts
• Beaver Themer Add-on to customize every part of your website, including headers and footers
• Total control over your website design
• Compatible with a wide range of WordPress themes
• A free version available as a plugin on WordPress.org
• World-class support
• Multisite capable
• White labeling
• Et cetera

Beaver Builder is a powerful page builder that makes creating beautiful and responsive WordPress websites a breeze. If it's your first time, you can try the free version and upgrade to a pro plan later.

They offer three pricing packages perfect for beginner site owners, professional freelancers, and creative agencies. All packages allow you to use Beaver Builder on an unlimited number of websites.

Now that we are all on the same page, let us move on to Swarmify's SmartVideo.

What is Swarmify SmartVideo?

Swarmify is a video acceleration company focused on bringing Netflix-quality streaming to everyone in a simple package. Our SmartVideo platform simplifies all the complex and expensive moving parts that surround video deployment.

SmartVideo automatically handles uploading, encoding, hosting, and delivers your videos no matter where you store them, be it YouTube, Dropbox, Amazon S3, Google Cloud, and so on.

Why Swarmify SmartVideo?

Swarmify SmartVideo platform helps businesses solve some of the hardest problems in video streaming: buffering and streaming quality. SmartVideo also stops YouTube's likes from siphoning your traffic using video players laden with links.

Thanks to our delivery solution, you can deliver videos that are 12x faster than average players in the industry. The same delivery platform also helps you to reduce stall-outs by 8x.

“Swarmify SmartVideo launched in May 2017. We have seen enormous growth every month. More businesses are recognizing the actual cost of using YouTube. Before SmartVideo, our solution was only available to large scale enterprise companies. In totality, we recently celebrated having streamed over five hundred million videos,” says Nathan Barnett, CEO, Swarmify. “If your website loads fast, but your video loads slow, you are still going to lose that customer.” Source: YourStory.com

SmartVideo helps you to deliver fast, buffer-free, and high-quality videos on your Beaver Builder website. We offer you a clutter-free video player that doesn't contain any links and third-party branding, allowing you to deliver professional video experiences to your website visitors.

Here are some of the features that make SmartVideo the best video acceleration platform around.

• Clean, distraction-free video player - YouTube and other platforms clutter their player with links to siphon your traffic. The SmartVideo player is clean, customizable, and leak-free.
• Automatic YouTube and Vimeo conversions - If you already use YouTube or Vimeo videos on your Beaver Builder site, SmartVideo will automatically convert all the videos as soon as you install our WordPress plugin.
• Optimized on every device, which means your videos can be viewed on any device and browser.
• Unlimited bandwidth and storage
• Speedy, buffer-free, and stall-proof playback
• Ongoing support provided by super-talented and friendly developers
• Simple pricing structure without shady contracts
• Video engagement analytics
• Global video CDN to deliver blazing-fast videos to users no matter where they are in the world
• Etc.

Swarmify SmartVideo is a game-changer in the video acceleration field. We bring a lot of work experience and expertise to the table.

Besides, installing SmartVideo on your Beaver Builder website is incredibly easy, as you'll learn in the next section. But if you're ever stuck, you can always contact us :) We're always glad to help.

Moving Swiftly, let us install SmartVideo on your Beaver Builder website.

NB: For the next section, you will need an active Swarmify account. Don't have an account yet? Create one today and take advantage of your exclusive 50% discount.

How to Integrate Swarmify SmartVideo with a Beaver Builder Website

Since Beaver Builder works with WordPress, we will be using the free SmartVideo plugin. After creating your Swarmify account, download the SmartVideo WordPress plugin to your computer.

Next, log in to your WordPress admin dashboard and navigate to Plugins > Add New, as shown below.

Next, click the Upload Plugin button, select the SmartVideo plugin from your computer, and hit Install Now:

After that, Activate the plugin:

We are not yet there - it's time to connect your website with your Swarmify account.

How?

Click SmartVideo on your WordPress admin menu, as we highlight below.

On the SmartVideo dashboard, click the Configure button:

Doing so leads you to the following configuration page, which has instructions and an interactive GIF showing exactly what you need to do next.

But to save you the trouble, quickly login to your Swarmify account and copy the Swarm CDN key at the top:

Go back to your SmartVideo configuration page in WordPress, scroll down, paste the Swarm CDN key, and click Enable SmartVideo, as shown below.

It's pretty straightforward; I don't expect you to face difficulties. Once done, you should see the green Enabled label at the top:

Before we learn how to add a SmartVideo video to your Beaver Builder website, let us cover some of the SmartVideo settings available on the above page.

Click the Settings tab, as we highlight in the screengrab below.

Doing so leads to the following settings page.

Let us go over each section briefly. I have numbered the sections appropriately for your pleasure.

(1) At the very top, you have the option to toggle SmartVideo on or off. Obviously, you want to keep SmartVideo always enabled to guarantee the best performance.

(2) Basic Options

You have the second section with a couple of basic options to customize your SmartVideo player and experience. Options available include:

• Toggle YouTube & Vimeo auto-conversions on or off - Tick the checkbox to convert YouTube and Vimeo videos already on your site automatically. Toggle on and leave it like that.
• Display closed captions when available from YouTube sources - Unless it's essential, leave this checkbox unchecked.
• Optimize background videos & existing videos - Turn this on, and SmartVideo will optimize existing videos and background videos. Toggle on and leave it like that.
• Change the shape of the play button - Self-explanatory. You have three shape choices: Default (or Hexagon), Rectangle, and Circle. Choose whichever you like. The default shape works for me :)
• Choose a color to match the video player components with your website colors - Again, you have the chance to customize how your video player looks on your site. Choose your custom color from here :)

Below that we have...

(3) Advanced Options

When you load the settings page, the Advanced Options section is collapsed. Click on the title to load the section, which offers you the following options.

• Toggle alternate layout method on or off - This option comes in handy if you experience odd video sizing or full-screen issues. Tick the checkbox.
• Toggle upload acceleration on or off - Having problems with your video uploads, toggle this option on.
• (Pro Plan Only) Set a watermark - Here, you can set an image or logo as a watermark for the video player. This is great for branding purposes, so use your best image/logo.
• (Pro Plan Only) Add VAST Ad URL - Here is where you enter your ad URL if you're looking to monetize your videos with advertisements from AdSense, DFP, SpotX, and so on.

Once you have the right settings, don't forget to click the Save Settings at the bottom of the page.

With that out of the way, let us add a smart video to your Beaver Builder page.

How to add SmartVideo to a Beaver Builder Page

I'm using the same page you showed you earlier for illustration purposes. I will be replacing the marked image at the top with a SmartVideo:

I borrowed the SpaceX Launches video from the SpaceX YouTube channel. It's the same video in our demo (please check it out).

NB: If YouTube is your source, ensure you're using the embed link (i.e., https://www.youtube.com/embed/gmJgW-yMAIg) instead of the direct watch link (i.e., https://www.youtube.com/watch?v=gmJgW-yMAIg).

To find the embed link, go below the video and click the Share button:

After that, click the Embed button, as shown below.

Then go inside the popup that appears and copy the embed link, as we highlight below.

See? That wasn't so difficult.

NB: Another thing, if you're sourcing videos from your YouTube channel and your videos are set to "private," change that to "unlisted."

With that preamble, let us go ahead.

Open your page in Beaver Builder:

Since I'm replacing the image, I must delete it first by clicking the Remove icon like so:

Which leaves me with an empty column:

Pro Tip: You can skip the above step if you're not replacing an image like in my case. Just ensure you have an empty column or row where you're adding your video. If you've used Beaver Builder before, that shouldn't be a problem.

Next, click the add content module (+) plus icon at the top:

After that, drag and drop the SmartVideo content block where you want to place the video:

Dragging and dropping the SmartVideo module brings up the nice little box shown below.

This box allows you to do a lot of things. For instance, it allows you to choose your video source and control a couple of basic and advanced options—more about that in a minute.

Next, click Video source, choose YouTube, paste your embed code, and hit Save, in that order:

Nice. You can already see the yellow hexagon play button and the video player even before clicking save.

Click Done at the top and then Publish:

Pro Tip: You can Save Draft if you're still working on the page.

If I check my smart video on the frontend, I will see the video in the clutter-free video player. The video is already optimized and accelerated by Swarmify, as you can see below.

No YouTube branding, no buffering, and no links that siphon your traffic. Oh yeah, there are no "Recommended videos," too when I pause the video. Plus, it loads pretty fast :)

But it looks oddly small, but that's because I didn't change my column width in Beaver Builder. You can change your column widths and move things around until you get the right size.

I played with my column width and edited some content, and this is what I got"

Not bad. Bigger is better after all :)

Now let us talk about the basic and advanced options we mentioned a second ago. You know? When we were adding the video and that nice little box popped up?

Click inside the SmartVideo content module inside Beaver Builder:

Doing so leads you to the following options, where you can see Basic and Advanced options:

Unlike the basic and advanced options that we covered when we connected your site to your Swarmify account, the above options allow you to customize how the player behaves, for lack of a better word.

This is what I mean. Go ahead and click Basic options, which leads you here:

Just look at that! Many options to control things such as video player width, height, play video inline (great for Safari OS browser), and responsive design.

You also have controls such as Autoplay (if you turn this on, make sure your video auto-plays muted), Muted (video starts muted), Loop (video keeps replaying), and even one to turn off controls (but don't do it because users won't be able to play or pause or turn down the volume, which is annoying).

Then you have the Advanced tab, which looks like this:

Again, a boatload of options to customize your video player even further. You add animations (make that video bounce when the page loads), set spacing around the video player, and so much more.

Again, as always, don't forget to save your changes when you're done.

Final Thoughts

Beaver Builder is quite an elegant page builder. It's powerful beyond what you'd imagine at first, but once you get in there and start tinkering, you quickly realize you have a formidable tool to build any modern website.

But it's not built for video optimization or even acceleration; it's merely a page builder. That's where Swarmify SmartVideo solution comes in. We help you deliver fast and professional video experiences on your Beaver Builder websites.

All without the heavy costs, limits, and technical challenges that come with most video hosts.

Did we leave out anything? Hit us up anytime, and we will be happy to chat.