Basic SmartVideo tag options

How to configure the SmartVideo tag for your video needs

The SmartVideo tag is a very flexible tool for your website with many possible configurations.

Want to create a fancy background video for your site? There’s a configuration for that.

Want to make a video play inline on mobile devices? There’s a configuration for that.

Want a video to play automatically? You guessed it: there’s a configuration for that.

Just scroll down this list, find the options you want for a particular video, and copy and paste it on your site. Feel free to Frankenstein configurations together to fit your use case. 🧟‍♂️

Please note:

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

1. Check two Vimeo settings. Set Who can watch to “Anyone”, because “Only me” and password-protected videos can’t be imported. To keep the video private to your own site, set Where can this be embedded to “Specific domains” and add your website’s domain: SmartVideo imports it and serves it on your pages. Don’t switch an already-embedded video to “Unlisted”: it adds an h= hash to the URL, so existing embeds stop matching.

2. Use the Vimeo embed link (https://player.vimeo.com/video/448062899). A plain https://vimeo.com/448062899 link also works, because SmartVideo rewrites it to the embed form. Other Vimeo links aren’t rewritten, such as a www.vimeo.com/... link, an unlisted link with an extra code in the path (vimeo.com/448062899/abc123), or a /channels/ or /showcase/ page. Use the embed link for those.

EXAMPLE:

<smartvideo src="https://player.vimeo.com/video/448062899"   
            width="1280" height="720"  
            class="swarm-fluid" 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.

Poster / Thumbnail

Designates an image to be shown until a user hits the play button. We recommend using a PNG or JPEG to be compatible with all browsers.

The poster value must be a full, public web URL (starting with https://). A file path from your own computer, like /Users/you/Downloads/image.png, will not work - your visitors’ browsers cannot load files from your machine, so no thumbnail appears. Upload the image to your website first, then use its web address. On Squarespace, for example, upload the image under Design > Website > Assets (on older versions: Design > Custom CSS > Manage Custom Files) and right-click it to copy its URL.

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

Autoplay

Tells player to begin playback automatically as soon as possible.

Pro tip: unless combined with muted, many browsers will restrict autoplay. We recommend only using autoplay in combination with muted. Also, adding playsinline is essential for proper playback is iOS/Safari when auto-played.

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

Muted

Tells player to begin playback with audio muted.

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

Loop

Tells player to restart the video once it ends.

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

That’s it for our basic SmartVideo tag options!

If you need more advanced options - including how to tint the player’s frosted-glass control bar with your brand color via glassTint - visit our advanced SmartVideo tag options article.

To change settings for every player on your site at once - your key, which videos are accelerated, colors, keyboard shortcuts, watermarks, and banners - see Configure SmartVideo with swarmoptions. To override settings for one video only, see Configure a single video with data-swarm-setup.

Keywords: auto-play, auto play, auto-playing, add picture for video, add image for video, add image, add overlay, thumbnail