Install SmartVideo on Webflow

Webflow is a popular no-code website builder used by designers, agencies, and course creators. Because Webflow supports custom code injection, installing SmartVideo is straightforward -- you'll add the Swarmify snippet to your site's global header and then place videos using an Embed element.

If you don't have a SmartVideo account yet, create one at swarmify.com/pricing/. Once you're registered, head back here to get set up.

Step 1: Get your Swarmify snippet

1. Log in to your Swarmify dashboard.
2. Go to the Configuration tab and copy the snippet shown there. It'll look something like this:

<script data-cfasync="false" async src="https://assets.swarmcdn.com/cross/swarmdetect.js"></script>
<script data-cfasync="false">
  var swarmOptions = {
    swarmcdnkey: "YOUR_SWARM_CDN_KEY",
    autoreplace: { youtube: true, vimeo: true }
  };
</script>

Step 2: Add the snippet to your Webflow site's custom code

This makes SmartVideo active on every page of your site.

1. In Webflow, open your project and go to Site Settings.
2. Click the Custom Code tab.
3. Paste the Swarmify snippet into the Head Code field.
4. Click Save Changes.

Note: Changes to Custom Code won't take effect until you publish your site.

Step 3: Add a video to a Webflow page

Once the snippet is in your site header, you can place SmartVideo players anywhere using an Embed element.

1. In the Webflow Designer, open the page where you want a video.
2. From the Add Elements panel (the plus icon), drag an Embed element onto the page.
3. Paste a SmartVideo tag inside it, replacing the src with your actual video URL:

<smartvideo src="https://your-storage.com/path/to/video.mp4"
            width="1280" height="720"
            class="swarm-fluid" controls>
</smartvideo>

1. Click Save & Close on the embed editor, then publish your site.

Password-protected pages

SmartVideo works on Webflow password-protected pages. The JavaScript snippet loads normally once a visitor enters the page password, so your videos will play as expected behind the password gate.

What happens after I install?

After adding the snippet to your Webflow site, SmartVideo will begin scanning your pages for videos. If you have Vimeo embeds on your site, they'll be automatically converted to SmartVideo -- no extra work needed. YouTube auto-conversion is available but may be unreliable due to Google's download restrictions -- we recommend using the SmartVideo Library upload or another supported video source for the best experience.

A video can take up to 30 minutes to convert depending on the length and resolution. You'll know a video has been fully converted when you hover over the Video Acceleration icon on the player and the popup says Video Acceleration: On.

Supported video sources

The src attribute accepts URLs from YouTube, Vimeo, Dropbox, Amazon S3, Wasabi, Google Drive, and more. See the full list in our video file sources guide.

Need help with SmartVideo tag options?

• Basic SmartVideo tag options - autoplay, mute, controls
• Advanced SmartVideo tag options - looping, poster images, and more
• How to add a video to a non-WordPress website

If you run into any issues, reach out to our support team and we'll get you sorted!

Keywords: webflow, web flow, embed, custom code, password protected