Background videos are often slow to start and bog down the load speed of an entire page. SmartVideo offers the unique ability to accelerate your background videos.

If you already have quite a few background videos on your site, we recommend making the change to our script outlined in Option 1. However, if you only have one or two background videos on your site or are jumping on the background video wagon for the first time, skip on down to Option 2


Option 1 (you already have a lot of background videos)

To auto-convert all of your background videos that are using <video> tags, include a comma at the end of youtube: true, then add videotag: true on the very next line.

Here's an example with videotag: true included.

<script data-cfasync="false">
    var swarmoptions = {
        swarmcdnkey: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
        autoreplace: {
            youtube: true,
            videotag: true
           
        }
    };
</script>
<script data-cfasync="false" src="//assets.swarmcdn.com/cross/swarmdetect.js"></script>


If you decide that you want all of your video accelerated but not your background video, simply change videotag: true to videotag: false



Option 2 (you don't have many background videos yet)

When adding a new background video or turning SmartVideo on for your current background videos, use a SmartVideo tag with autoplay, muted, playsinline, and loop activated and controls deactivated.

Pro tip: include a poster image of your video's first frame for a professional looking background video that doesn't start off with a black frame.

Here's a quick example with ideal formatting: 

<smartvideo src="path/to/my/video.mp4" width="800" height="600" class="swarm-fluid" poster="first/frame/of/video.png" autoplay muted loop playsinline></smartvideo>



Need some help getting background videos set up on your site? Give us a shout by clicking the orange button at the bottom right of this page!

Did this answer your question?