Videos

On this page

About

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.

Examples

Single video hosted on Sirv

Here's a single video:

The code is simple:

<div class="Sirv" data-src="https://demo.sirv.com/videos/e-tron_quattro.mp4"></div>

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

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

If you only need sirv.js for videos and you don't need it for images or spins, you can use a slimmed-down version:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js" data-components="video"></script>

Options

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.
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

Example:

<div class="Sirv">
  <div data-src="https://sirv.com/video.mp4" data-options="loop: false;"></div>
</div>

Global options

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

<script>
SirvOptions = {
  "viewer": {
    "video": {
      "autoplay": false,
      "loop": false,
      "volume": 100,
      "controls": {
        "enable": true,
        "volume": true,
        "speed": false,
        "quality": false
      }
    }
  }
}
</script>

Autoplay

To automatically start playing the video on load, set video.autoplay to true:

<div class="Sirv" data-options="video.autoplay:true">
  <div data-src="https://demo.sirv.com/video.mp4"></div> 
</div>
<script>
var SirvOptions = {
  "viewer": {
    "video": {
      "autoplay": true
    }
  }
}
</script>

Loop

To restart the video automatically when it reaches the end, set video.loop to true:

<div class="Sirv" data-options="video.loop:true">
  <div data-src="https://demo.sirv.com/video.mp4"></div> 
</div>
<script>
var SirvOptions = {
  "viewer": {
    "video": {
      "loop": true
    }
  }
}
</script>

Controls

To show or hide the volume, quality and speed controls, use the video.controls.volume, video.controls.quality or video.controls.playback options.

To hide all controls, including the ability to play/pause on click, set video.controls.enable:false. Use this in conjunction with video.loop:true and video.autoplay:true to play a non-stop looping video on your page.

<div class="Sirv" data-options="video.autoplay:true; video.loop:true; video.controls.enable:false">
  <div data-src="https://demo.sirv.com/video.mp4"></div> 
</div>
<script>
var SirvOptions = {
  "viewer": {
    "video": {
      "autoplay": true,
      "loop": true,
      "controls": {
        "enable": false
      }
    }
  }
}
</script>

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="https://demo.sirv.com/demo/303/testing.mp4"></div>
  <div data-src="https://demo.sirv.com/demo/303/benefits.mp4"></div>
  <div data-src="https://demo.sirv.com/demo/303/0.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/303/1.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/303/2.jpg" data-type="zoom"></div>
</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="https://demo.sirv.com/videos/e-tron_quattro.mp4?thumbnail=200&q=60">

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="https://demo.sirv.com/videos/e-tron_quattro.mp4?thumbnail=250&q=60&video.thumbPos=34.8">

YouTube and Vimeo videos

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

The code is:

<div class="Sirv">
  <div data-src="https://www.youtube.com/watch?v=chSL_ZN3A1Y"></div>
  <div data-src="https://player.vimeo.com/video/266931123"></div>
  <div data-src="https://demo.sirv.com/videos/e-tron_quattro.mp4"></div>
</div>

Button color

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

  • Default state: .smv .smv-sirv-video.video-js .vjs-big-play-button
  • On hover/focus: .smv-sirv-video.video-js:hover .vjs-big-play-button, .smv-sirv-video.video-js .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 .smv-sirv-video.video-js .vjs-big-play-button {
        background-color: rgba(250, 251, 0, 0.5);
    }

    .smv-sirv-video.video-js:hover .vjs-big-play-button,
    .smv-sirv-video.video-js .vjs-big-play-button:focus {
        background-color: rgba(250, 251, 0, 1);
    }
</style>

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)

Video limits

To generate streams from videos, the maximum file size of the uploaded video is 512MB.

Was this article helpful?

Get help from a Sirv expert