Skip to main content

Background Video Acceleration

James Christensen
  • Updated

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.

Option 1. If you have our plugin for WordPress installed and you already have a lot of background videos on your site:

To auto-convert all of your videos that are using <video> tags, simply visit the SmartVideo plugin Settings menu and toggle Optimize background videos & existing videos on. This can conflict with some WordPress themes, so you will have to experiment!

smart_video_bg_vid.gif

Option 2. If you have our plugin for WordPress installed and you don't have many background videos on your site yet:

Simply add a SmartVideo with autoplay, muted, play inline, and loop activated and controls deactivated. You might also need to toggle off responsive.

wp_bg_vid.gif

Option 3. If you don't have our plugin for WordPress installed and you already have a lot of background videos on your site:

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.

<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 4. If you don't have our plugin for WordPress installed and you don't have many background videos on your site 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 button at the bottom right of this page!

Related articles