Advanced SmartVideo tag options

SmartVideo tag configuration options for advanced users

If you haven’t checked out our Basic SmartVideo tag options article, you should do so, as >95% of use cases are addressed by the options shared on that page. However, if you’re an advanced user with a unique configuration need that is not met in that article, keep reading!

Please note:

 If you choose to use Vimeo as the original video source location, be aware of two important items below.

1. If your videos are set to “private,” change them to “unlisted” instead. This ensures Swarmify can see the file to begin fetching and processing.

2. Make sure you are using the correct URL format. The source URL from Vimeo must be the embed link. 

Correct URL format: 

• Vimeo: https://player.vimeo.com/video/448062899

Incorrect URL format: 

• Vimeo: https://vimeo.com/448062899

EXAMPLE: 

<smartvideo src="https://player.vimeo.com/video/448062899"  
            width="1280" height="720" class="swarm-fluid"  
            poster="path/to/my/image.png" controls>  
</smartvideo>

If you are not using Vimeo, SmartVideo supports WordPress Media Library, Amazon S3, Google Cloud Storage, Wasabi, Dropbox, Google Drive, and even pCloud as the original file source location we are able to pull a copy from.

Controls

You might have noticed that controls is included in every SmartVideo tag. That’s because, in the majority of cases, controls are desired so that a user is able to alter playback. To remove controls from the player, simply remove controls from the tag.

Pro tip: if you remove controls, make sure to set the video to autoplay (and muted to make sure autoplay works). If you don’t, the user will have no way of beginning video playback.

<smartvideo src="https://your-video.example.com/file.mp4"  
            width="1280" height="720"  
            class="swarm-fluid" muted autoplay>  
</smartvideo>

Play inline

Safari on iOS forces videos to go fullscreen. Use playsinline to tell Safari not to. Please note: when auto-playing a video, enabling Play inline is essential for proper playback in IOS/Safari

<smartvideo src="https://your-video.example.com/file.mp4"  
            width="1280" height="720"  
            class="swarm-fluid" controls  
            playsinline>  
</smartvideo>

Make player unresponsive (fixed dimensions)

Removing class=“swarm-fluid” tells the player to maintain height and width no matter what changes are made to the size of the browser window.

<smartvideo src="https://your-video.example.com/file.mp4"  
            width="1280" height="720" controls>  
</smartvideo>

Tint the frosted-glass surfaces (glassTint)

The SmartVideo player’s control bar, menus, and overflow panel use a frosted-glass treatment that can subtly pick up your primary brand color. You can dial that effect up or down with glassTint.

This one is not a tag attribute - the tint is applied as page styling, so it covers every player on the page at once. Set it in your global swarmoptions, under theme:

<script data-cfasync="false">
    var swarmoptions = {
        swarmcdnkey: "YOUR_SWARM_CDN_KEY",
        theme: {
            glassTint: 5
        }
    };
</script>

glassTint accepts whole numbers from 0 to 15 (anything outside that range is clamped). The default is 3 - a soft wash; increase it for a more saturated brand feel, or set it to 0 to opt out and keep the glass neutral. 🎨

For the rest of the theme settings - colors, corner radius, play-button shape - see Configure SmartVideo with swarmoptions and Customize player color.

Note: On older browsers that don’t support color-mix() (e.g. Safari 15), the player automatically falls back to a gray frosted glass. Visitors who turn on Reduce Transparency or High Contrast in their OS will see solid backgrounds instead of glass - this is intentional, for accessibility.

That’s it for our advanced SmartVideo tag options!

For the full list of site-wide settings - automatic replacement, theme, keyboard shortcuts, watermarks, banners, and ads - see Configure SmartVideo with swarmoptions. Some of those, including the plugin settings, can be overridden for a single embed; theme and automatic replacement are site-wide only. See Configure a single video with data-swarm-setup for which is which.