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, as early in your HTML possible, for fast loading:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></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>

Autoplay audio

Autoplay videos will start with the volume muted. This behaviour is determined by the browser - it is not possible to autoplay a video with sound enabled. To hear sound, the visitor should click the unmute icon.

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>

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

The following example creates 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>

Yellow button, default state

Yellow play button with 50% opacity

Yellow button, on hover/focus

Yellow play button with 100% opacity on hover

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

Custom video thumbnail

The image displayed before your video plays is called the thumbnail (or poster). The thumbnail image also determines the gallery thumbnail, if your video is part of a gallery.

The default thumbnail is the frame at one-third into the video duration. You can choose a different image by adding thumbnail in the data-options, like so:

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

Any image URL can be shown as the thumbnail - either from your Sirv account or an image elsewhere on the web.

You can also set the thumbnail as a different frame from the video. The example below would set the frame from 11.8 seconds into the video:

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

Show image from video

You can show any frame from a video as an image. Just append ?thumbnail=250 to the video URL (where 250 is the width in px). Any of Sirv's 100+ dynamic imaging options can also be applied.

The following example sets width of 300px and quality of 85%:

https://demo.sirv.com/videos/e-tron_quattro.mp4?thumbnail=300&q=85

Choose a particular frame from the video by setting video.thumbPos. The value looks like xxx.xx where xxx is the number of seconds and xx is the frame number for that second. The following example shows frame 8 from the 34th second:

https://demo.sirv.com/videos/e-tron_quattro.mp4?thumbnail=300&q=85&video.thumbPos=34.8

Use that image however you wish - as the video thumbnail in your gallery or just as an image on its own.

YouTube and Vimeo videos

You can embed YouTube and Vimeo videos simply by adding the video URL in a div.

The following example adds 3 videos - from YouTube, Vimeo and Sirv:

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

Videos from other sources

Your gallery can contain videos from other video services.

You just need the embed code for the video (usually an iframe).

  1. Create a <div></div> for the video .
  2. Paste the video's embed code after the <div>.
  3. Use data-thumbnail-image to add a thumbnail image in the <div>.

Example of Wistia embedded video:

<div class="Sirv">
  <div data-thumbnail-image="https://embedwistia-a.akamaihd.net/deliveries/1e7b480521adb0d8cc29dbd388faa14eb7c99d21.jpg?image_crop_resized=160x90">
    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe src="https://fast.wistia.net/embed/iframe/nuzs3q592f?videoFoam=true" title="Hey there, welcome to Wistia! Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
  </div>
</div>

Example of Dacast (Vzaar) embedded video:

<div class="Sirv">
  <div data-thumbnail-image="https://view.vzaar.com/22160103/thumb">
    <div class="vz-container" style="position:relative;padding-bottom:56.25%;overflow:hidden;height:0;max-width:100%;" ><iframe id="vzvd-22160103" name="vzvd-22160103" title="video player" type="text/html" width="100%" height="100%" frameborder="0" allowfullscreen allowTransparency="true" src="https://view.vzaar.com/22160103/player" allow="autoplay" class="video-player video-player-responsive" style="position:absolute;top:0;left:0;"></iframe></div>
  </div>
</div>

HLS streaming resolutions

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

Three HLS streams will be 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)

Videos are scaled by their shortest dimension, so a portrait video (height greater than width) will be scaled by its width. For example, the 720p stream of 1080 × 1220 would be scaled to 720 × 814 (w × h).

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