Documentation

Please note that most of the settings described in this page can be set via the Video Publishing Assistant and via your site’s Player editor page on MySublimeVideo.

These settings can be set on the <video> element to customize the player aspect and behavior. Please note that, if you are using our JavaScript API to prepare your players, these settings must be set before preparing them.

Start view settings

initial-overlay-enable initial-overlay-visibility

Player behavior settings

autoresize autoplay on-end fullmode-enable fullmode-priority

Display settings

player-kit

Controls settings

controls-enable controls-visibility volume-enable

Video metadata settings

uid title

YouTube video settings

youtube-id youtube-suggested-quality

See also Using the data settings and Lightbox settings.

initial-overlay-enable

Allows you to enable or disable the initial overlay.

Allowed values:

• true – (Default) Shows the initial overlay.
• false – Disables the initial overlay.

Example:

<video class='sublime' data-initial-overlay-enable='false'>
  ...
</video>

See the Custom start view page for more information and live demos.

initial-overlay-visibility

Allows you to choose how the initial overlay is displayed.

Allowed values:

• autofade – (Default) The initial overlay fades-out on mousover.
• visible – The initial overlay is always visible and doesn’t fade-out on mouseover.

Example:

<video class='sublime' data-initial-overlay-visibility='visible'>
  ...
</video>

See the Custom start view page for more information and live demos.

autoresize

Resizes the video when its parent container is resized.

Allowed values:

• none – (Default) The player is not resized automatically.
• fill – Fills the player’s parent and stretch the player if necessary (resulting in letter/pillar-boxed video). Check out the live demo.
• fit – Fits the player’s to its parent without stretching the player itself (its size will always match the video’s aspect-ratio and never shows black bars). Check out the live demo.

Example:

<video class='sublime' data-autoresize='fill'>
  ...
</video>

autoplay

Allows you to autoplay the video upon page load. This flag may have no effect on touch devices since user interaction is required to start playing the video.

Allowed values:

• true – Autoplay the video upon page load.
• false – (Default) Don’t autoplay the video upon page load.

Example:

<video class='sublime' data-autoplay='true'>
  ...
</video>

on-end

Allows you to define the player’s behavior once a video playback ends.

Allowed values:

• nothing – (Default) The video’s last frame is displayed.
• replay – The video playback restarts from the beginning.
• stop – The video goes back to it’s initial state and the initial start view (with the play button) is displayed.

Example:

<video class='sublime' data-on-end='replay'>
  ...
</video>

controls-enable

Allows you to enable or disable the controls.

Allowed values:

• true – (Default) Displays the controls.
• false – Hide and disables the controls.

Example:

<video class='sublime' data-controls-enable='false'>
  ...
</video>

controls-visibility

Allows you to define the controls visibility.

Allowed values:

• autohide – (Default) The controls auto-hide when the mouse is not over the video.
• visible – The controls are always visible.

Example:

<video class='sublime' data-controls-visibility='visible'>
  ...
</video>

fullmode-enable

Allows you to enable or disable the fullmode feature.

Allowed values:

• true – (Default) Allows the player to go full-window / fullscreen
• false – Disables the fullmode resulting in the player unable to go full-window / fullscreen at all.

Example:

<video class='sublime' data-fullmode-enable='false'>
  ...
</video>

fullmode-priority

Allows you to choose the default “fullmode” method used when a visitor clicks the “fullscreen” button.

Allowed values:

• screen – (Default) The player goes to fullscren when possible, and fallbacks to full-window otherwise.
• window – The player goes to full-window instead of fullscreen.

Example:

<video class='sublime' data-fullmode-priority='window'>
  ...
</video>

player-kit

Allows you to set a different player than your default player.

Allowed values:

• player id – You can find your player’s id in the “Players” page of your site.

Example:

<video class='sublime' data-player-kit='2'>
  ...
</video>

volume-enable

Allows you to enable or disable the volume control.

Allowed values:

• true – (Default) Enables the volume control.
• false – Disables the volume control.

Example:

<video class='sublime' data-volume-enable='false'>
  ...
</video>

youtube-id

Allows you to set the ID of a YouTube video to be played in SublimeVideo.

Allowed values:

• any YouTube ID

Example:

<video class='sublime' data-youtube-id='rAq2rNEru8A'>
</video>

Note: See the Use SublimeVideo with YouTube videos page for more information.

youtube-suggested-quality

Specifies the suggested playback quality for YouTube videos. You can use this setting to start YouTube videos in HD.

Allowed values:

• none – (Default) No suggested playback quality.
• hd – Starts YouTube video in HD (720p).

Example:

<video class='sublime' data-youtube-suggested-quality="hd" data-youtube-id='rAq2rNEru8A'>
</video>

uid

Allows you to define a unique ID for your video. If the auto embedding feature is enabled, you must set a unique ID for your videos.

Allowed values:

• string – A unique string among all your videos. The string must be composed of alphanumeric, “-” (hyphen) and “_” (underscore) characters exclusively (case insensitive) and must be at least 1 character and less than 65 characters.
  The actual regular expression used to validate the uid is: /^[a-z0-9_\-]{1,64}$/i.

Example:

<video class='sublime' data-uid='video1'>
  ...
</video>

Note: The value of this setting is displayed in your Statistics dashboard.

title

Allows you to define a title for your video. The generic title attribute is also supported and perfectly equivalent to data-title (see example).

data-name is now deprecated, but will continue to be supported for back compatibility reasons.

Allowed values:

• string

Examples:

<video class='sublime' data-title='My awesome video'>
  ...
</video>

<!-- you can also use the generic title attribute if you prefer -->
<video class='sublime' title='My awesome video'>
  ...
</video>

Note: The value of this setting is currently used in your Statistics dashboard.