Skip to main content

Basic SmartVideo tag options

James Christensen
  • Updated

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 YouTube 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 YouTube/Vimeo must be the embed link. 

Correct URL format: 

Incorrect URL format: 

EXAMPLE:

<smartvideo src="https://www.youtube.com/embed/wBp0Rb-ZJak" 
            width="1280" height="720"
            class="swarm-fluid" controls>
</smartvideo>

**If you are not using YouTube or 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.

<smartvideo src="path/to/my/video.mp4"
            width="1280" height="720"
            class="swarm-fluid"
            poster="path/to/my/image.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="path/to/my/video.mp4"
            width="1280" height="720"
            class="swarm-fluid" controls
            muted autoplay playsinline>
</smartvideo>

Muted

Tells player to begin playback with audio muted.

<smartvideo src="path/to/my/video.mp4"
            width="1280" height="720"
            class="swarm-fluid"
            controls muted>
</smartvideo>

Loop

Tells player to restart the video once it ends.

<smartvideo src="path/to/my/video.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, visit our advanced SmartVideo tag options article

 

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

 

Related articles