If your website or content management system does not allow custom <smartvideo> tags, use a standard <video> tag with class="smartvideo" instead. SmartVideo detects that class and replaces the element with its player.
Install the loader first
Add this snippet to your page’s <head> before adding the video. Replace YOUR_SWARM_CDN_KEY with your Swarm CDN Key from the dashboard. If the page already has the SmartVideo snippet or the WordPress plugin supplies it, do not add a second copy.
<script data-cfasync="false">
var swarmoptions = {
swarmcdnkey: "YOUR_SWARM_CDN_KEY",
iframeReplacement: "iframe",
autoreplace: {
youtube: true
}
};
</script>
<script async data-cfasync="false" src="https://assets.swarmcdn.com/swarmcdn.js"></script>Add the video
Paste this into the page body and replace the example URL with your video source:
<video src="https://your-video.example.com/file.mp4" width="1280" height="720" class="smartvideo swarm-fluid" controls></video>If you use a direct video-file URL, make sure it returns the video file without requiring a login or browser cookies. You can also use a swarmify:// reference copied from a Library video’s Media Details page; it still requires the loader or plugin. See video file sources.
A marked <video> takes the same attributes as a <smartvideo> tag (Basic SmartVideo tag options), including controls, autoplay, muted, loop, and poster. Add muted with autoplay: most browsers block autoplay with sound.
width and height set the video’s dimensions; swarm-fluid makes the player fit its container. HTML boolean attributes are enabled by their presence: remove an unwanted attribute rather than writing autoplay="false", for example. Site-wide player options can also affect the player.
Plain video tags and background videos
Plain-video scanning with autoreplace.videotag keeps the native <video> element rather than replacing it with the SmartVideo player. By default, that scanning is off.
Accelerating plain <video> tags with autoreplace.videotag is available on Growth and Pro. See plans and pricing. On Startup, use the class="smartvideo" example above to get the SmartVideo player instead.
To enable plain-video scanning on Growth or Pro in WordPress, open SmartVideo in your WordPress admin sidebar, go to the Settings tab, and turn on Background & HTML5 videos under Auto-conversions. With a manual snippet, add videotag: true to the existing autoreplace object:
autoreplace: {
youtube: true,
videotag: true
}autoreplace.videotag: true scans plain <video> elements for an MP4 source in src or a child <source>. In supported browsers, SmartVideo delivers the video from its CDN while keeping your native <video> element and its controls, autoplay, muted, loop, and poster attributes; browser autoplay restrictions still apply.
For a native background video, keep your existing layout and use autoplay muted loop playsinline without controls. Enable plain-video scanning as above if you want that path, and leave off the smartvideo class. Adding that class opts into the SmartVideo player instead; it is not the same as preserving a native background video.