On this page


Sirv Media Viewer can embed videos from your Sirv account, streaming them so they load fast.

Video streaming is disabled by default. Contact the Sirv support team to request it to be enabled in your account.


Single video hosted on Sirv

Here's a single video:

The code is simple:

<div class="Sirv" data-src=""></div>

Your page should also reference the sirv.js script (anywhere in your HTML):

<script src=""></script>


Adjust the video behaviour and playback with the following options:

Parameter Default Options Description
autoplay false true, false Automatically play the video on load.
loop false true, false Replay the video after it ends.
volume 100 0-100 Set the initial volume.
volume 100 0-100 Set the initial volume.
controls.enable true true, false Show or hide the video controls.
controls.volume true true, false Show option to change video volume.
controls.speed false true, false Show option to change playback speed.
controls.quality false true, false Show option to change video resolution.

You can apply video options either inline or globally in a script.

Inline options


<div class="Sirv">
  <div data-src="" data-options="loop: false;"></div>

Global options

The example script below shows all videos options and their defaults:

SirvOptions = {
    viewer: {
        video: {
            autoplay: false,
            loop: false,
            volume: { type: 'number', minimum: 0, maximum: 100, defaults: 100 },

            controls: {
                enable: true,

                // Volume control
                volume: true,

                // Playback rate control
                speed: false,

                // Quality (resolutions) control
                quality: false

Videos and images

Videos can be shown alongside static, zoomable or 360 spinning images. Thumbnails are automatically generated, to switch between assets:

Sample code:

<div class="Sirv">
  <div data-src=""></div>
  <div data-src=""></div>
  <div data-src="" data-type="zoom"></div>
  <div data-src="" data-type="zoom"></div>
  <div data-src="" data-type="zoom"></div>

Video thumbnail

You can show a thumbnail image (a frame from the video) by appending ?thumbnail=200 to the video URL. The value is the width in px. You can also apply any of Sirv's dynamic imaging options, such as quality:

<img src="">

The default thumbnail is 1/3rd into the video. You can pick another thumbnail by setting video.thumbPos to xxx.xx where xxx is the number of seconds and xx is the frame number for that second. Example:

<img src="">

YouTube and Vimeo videos

You can embed YouTube and Vimeo videos in the same way:

The code is:

<div class="Sirv">
  <div data-src=""></div>
  <div data-src=""></div>
  <div data-src=""></div>

Button color

To change the button color, adjust the following CSS styles:

  • Default state: .smv .vjs-big-play-button
  • On hover/focus: .vjs-big-play-button, .vjs-big-play-button:focus

For example, this will create a 50% opacity yellow button with 100% opacity on hover:

<style type="text/css">
    .smv .vjs-big-play-button {
        background-color: rgba(250, 251, 0, 0.5);
    } .vjs-big-play-button, .vjs-big-play-button:focus {
        background-color: rgba(250, 251, 0, 1);

Default state

Yellow play button with 50% opacity

On hover/focus

Yellow play button with 100% opacity on hover

HLS streaming resolutions

Once HLS video streaming is enabled on your account, Sirv will generate multiple video streams when you upload a video.

Three HLS streams are generated by default:

  • 720p (1280 × 720)
  • 480p (854 × 480)
  • 360p (640 × 360)

Up to 5 more streams can be generated on demand from a choice of:

  • 2160p (3840 × 2160)
  • 1440p (2560 × 1440)
  • 1080p (1920 × 1080)
  • 240p (426 × 240)

Was this article helpful?

Get help from a Sirv expert