We are closing.

Dm banner


Using the JavaScript API


The SublimeVideo Player comes with an integrated JavaScript API. Once loaded, SublimeVideo Player instantiates a unique API object called sublime. All calls to the API must be done through this object.

For performance puroposes, SublimeVideo Player and the sublime API object are automatically loaded upon page load if there is at least an element with the sublime class in the DOM. If you have no videos (or lightboxes) initially on the page (and you plan for instance to add them dynamically later with JavaScript) you can use the sublime.load method to force the loading of the player and the sublimevideo API object.

// Manually invoke load if there are no elements
// with the "sublime" class when the page is first loaded.

Once SublimeVideo is loaded and the DOM elements with the sublime class are prepared, the application invokes the callbacks registered with sublime.ready. Inside these callbacks you can safely call all other API methods.

  // You can safely call the sublime API methods here.

The SublimeVideo JavaScript API might not be immediately available when the DOM is loaded, hence you should avoid making API calls in your own DOM loaded/ready method (e.g. DOMContentLoaded, jQuery’s .ready() or Prototype’s dom:loaded)

Retrieving API objects

Every element that can be prepared by SublimeVideo (videos, lightboxes, etc) exposes its own set of APIs. You can retrieve these object by calling sublime.<object_type>(elementOrId).

For instance, to get the player for the video with the my_video_id id:

var player = sublime.player('my_video_id');

and to get the lightbox for the link with the my_lightbox_trigger_id id:

var lightbox = sublime.lightbox('my_lightbox_trigger_id');

As a shortcut, you can also retrive API objects by dropping the <object_type> as follow:

var player   = sublime('my_video_id');
var lightbox = sublime('my_lightbox_trigger_id');



load ready prepare unprepare player lightbox version env


Methods: play pause stop setSize videoId videoElement on seekTo duration playbackTime videoWidth videoHeight

Events: start play pause end stop seek metadata timeUpdate


Methods: open close on

Events: contentReady didOpen didClose