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. By default the effect is gentle, but you can dial it up or down per-tag with the glassTint attribute:

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

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

If you’d rather set the value globally for every player on your site instead of per-tag, you can do that from the Customize player color article.

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!