Dm banner

Jilion joins Dailymotion

SublimeVideoDocumentation

WordPress plugin

Table of Contents

This plugin allows you to easily integrate SublimeVideo with your WordPress site. It automatically connects to your SublimeVideo account, gathers the necessary license information and provides an easy-to-use visual editor that will help you generate shortcodes for your videos.

Check out the short demo video below to see just how easy it is to use.

Installation and set up

  1. Download the plugin from the WordPress Plugin Directory and upload the sublimevideo-official folder to the /wp-content/plugins/ directory. Alternatively, you can install the plugin via the Install Plugins section in your WordPress admin area.
  2. Activate the plugin through the ‘Plugins’ menu item in your WordPress admin area.
  3. Go to the SublimeVideo plugin settings page and authorize the plugin to access some of your SublimeVideo data. You will be redirected to the SublimeVideo site to complete the authorization process.
  4. Once the authorization is complete, you will see your SublimeVideo sites listed in a drop-down menu in the plugin settings page; you’ll have to choose the one matching the domain of your WordPress site. If you only have one site registered in your SublimeVideo account, it will be selected automatically.
  5. In the plugin settings page you can also set the default width for all the videos you will embed and choose whether you want to use the stable version of the player or the beta version.
  6. Go to the post editor, you should see the new Sv toolbar icon button next to the media icons (image, video, audio, etc) – the plugin’s installation is now complete. If you don’t see it, please refer to the Troubleshooting section below.

Usage

Go to your WordPress Media Library and upload some video files and poster images (if your assets are hosted externally, you can skip this step).
Click the Sv toolbar icon button to access the “Add SublimeVideo” pop-up panel. It is composed of 3 sections: Poster frame, Video sources and Live preview (initially hidden).
Please note that it’s currently not possible to upload media directly from this popup.

Poster frame

Note for YouTube videos: If you want to use the default poster frame from YouTube, don’t choose any poster frame here.

Poster frame
The SublimeVideo WordPress plugin’s poster frame browser.

Images in the browser are ordered by date of upload. Simply click an image to choose it as the poster frame.

If your poster frame is stored on an external server, you can click the “Or use an external URL” link to directly enter the URL of your poster frame.

Video sources

YouTube video

Video source youtube

Copy and paste the YouTube video URL into the “Your YouTube video ID” field, and that’s it!

Media library or external video

Video sources

Learn more about video formats and encoding on this page.

You must provide at least one MP4 source. Learn why here.

You can change your video size, but we recommend always leaving “Keep original ratio” checked to avoid seeing black “letterbox” bars on the top and bottom (or sides) of your video.

You can also add a mobile-specific version (with a lower resolution/bitrate than your primary MP4 source) by checking “Add a mobile version” and selecting a video file.

If your video files are stored on an external server, you can click the “Or use an external URL” link to directly enter the URL of a video file.

Live preview

The live preview section will appear once you’ve chosen at least one video source file and is updated each time you make a change (to either the poster frame, video source files or video size).

Add the video to your post

When you’re satisfied with the result, click the “Add to my post” button. This will generate and insert a shortcode into your post.
If you want to modify this shortcode, please see the two next sections.

Shortcodes

Basic shortcode

A basic shortcode generated by the plug-in looks like this:

[sublimevideo poster="video-poster.jpg" src1="video.mp4" src2="video.ogv" width="640" height="360"]

Lightbox shortcode

If you want to use the lightbox feature, the shortcode is slightly different. It is composed of two parts ([sublimevideo-lightbox attributes...] and [/sublimevideo-lightbox]) that wraps around the initial element and will trigger the opening of the lightbox. Here is a simple example:

[sublimevideo-lightbox poster="video-poster.jpg" src1="video.mp4" src2="video.ogv" width="640" height="360"]initial element[/sublimevideo-lightbox]

The initial element can be an image or a text. To use an image, click the “Add Media” button. When you’ve made your choice, be sure to set “Link URL” to “None” before clicking the “Insert into Post” button (the lightbox takes care of wrapping the initial element inside a link).

Shortcodes attributes

Poster frame

[sublimevideo poster="http://yoursite.com/your_video_image.jpg"]

We recommend using a poster frame with dimensions proportional to the width x height attributes present in the shortcode.

Sources

[sublimevideo src1="http://yoursite.com/video.mp4" src2="http://yoursite.com/video.webm"]

You can add as many sources as you want with the srcN attribute (as long as N is an integer). Sources are ordered by their N (i.e. src1 before src2, src2 before src3 etc…).

HD sources

[sublimevideo src1="http://yoursite.com/video.mp4" src2="(hd)http://yoursite.com/video_hd.mp4" src3="http://yoursite.com/video.webm" src4="(hd)http://yoursite.com/video_hd.webm"]

You can define a source to be HD by adding (hd) just before the URL. In the example above, “http://yoursite.com/video_hd.mp4” would be the HD version of “http://yoursite.com/video.mp4” and “http://yoursite.com/video_hd.webm” would be the HD version of “http://yoursite.com/video.webm”. Learn more about HD Switching.

Player settings

[sublimevideo settings="initial-overlay-enable:false; volume-enable:false"]

You can set any Player settings through the settings attribute.

To learn more about the settings you can set, please consult the Player settings page.

Video metadata settings

[sublimevideo uid="unique_id" title="A nice title here"]

You can set the data-uid and title Player settings through the uid and title attributes.

data_uid and data_name are now deprecated, but will continue to be supported for back compatibility reasons.

To learn more about the data-uid and title attributes, please consult our Real-Time Statistics add-on page.

Lightbox settings

[sublimevideo-lightbox lightbox_settings="overlay-opacity:0.9; on-open:nothing"]Play video[/sublimevideo-lightbox]

You can set any Lightbox settings through the lightbox_settings attribute.

To learn more about the settings you can set, please consult the Lightbox settings page.

Autoplay

[sublimevideo autoplay]

Automatically plays the video upon page load.

Please note that only the first video with the autoplay attribute will actually autoplay upon page load. SublimeVideo currently doesn’t allow multiple videos to play simultaneously.

Loop

[sublimevideo loop]

Loops the video once its playback ends.

DOM id

[sublimevideo id="a_unique_id"]

Allows you to set a DOM id for your <video>. If you don’t set an id, the plugin will generate one for you.

CSS classes

[sublimevideo class="sublime another_class"]

Allows you to set CSS classes for your <video>.

Be sure to add the sublime class manually if you use this shortcode attribute.

CSS style

[sublimevideo style="display:none;"]

Allows you to set CSS inline style for your <video>.

Preload

[sublimevideo preload="auto"]

Allowed values:

  • none (default)
  • auto
  • metadata

Setting preload to “none” will save you bandwidth by preventing preloading (buffering) of the video upon page load.

FAQ

My theme is responsive, how can I make my videos responsive too?

Simply add settings="autoresize:fit" (or settings="autoresize:fill") in your shortcode, as follow:

[sublimevideo src1="..." width="..." height="..." settings="autoresize:fit"]

Learn more about the autoresize player settings in the Player settings page.

How can I play a YouTube video with the SublimeVideo WordPress plugin?

Since the version 1.8.0, you can use the visual editor to set your YouTube video.

For older versions, or if you want to do it manually, please read the following instructions.

Let’s say you want to play the following video: https://www.youtube.com/watch?v=abcd1234

Simply add settings="youtube-id:abcd1234" in your shortcode, as follow:

[sublimevideo src1="..." width="..." height="..." settings="youtube-id:abcd1234"]

Learn more about the youtube-id player settings in the Player settings page.

Troubleshooting

Why don’t I see any site in the Settings page?

  • It’s probably because your WordPress site’s domain is not properly registered in your SublimeVideo account. You may find other possible reasons for this problem in the Troubleshooting page.
  • Another possibility is that you previously linked the plugin with another SublimeVideo account account. The easiest solution is to deactivate the plugin and re-activate it right away. Then follow the Installation steps (skipping the 2 first steps, obviously).

If you have any other issue, please visit our Troubleshooting page.

Changelog

1.8.2 – July 29, 2013

  • Fix a preview issue when using a YouTube source.

1.8.1 – April 3, 2013

  • Fix an issue with dimensions fields.

1.8.0 – March 28, 2013

  • Add support for YouTube videos in the visual editor.
  • Add support for the title shortcode attribute.
  • Deprecate the data_name shortcode attribute.

1.7.0 – March 6, 2013

  • New lightbox_settings shortcode attribute to allow to pass lightbox specific settings.
  • When a youtube-id is set in the settings attribute, the uid is set to the YouTube video id.

1.6.0 – March 5, 2013

  • Unique DOM id are now generated for all new video elements.
  • Unique data-uid are now generated for all new video elements.
  • Allow nested shortcode for the “src” attributes.
  • Remove code that is not necessary anymore with the new SublimeVideo player.
  • Fix a “Undefined property” warning visible in debug mode.
  • Refactor the SublimeVideoShortcodes class.

1.5.2 – December 14, 2012

  • Fix a warning visible in debug mode.
  • Fix a button design issue.

1.5.1 – December 14, 2012

  • Fix issue: Added a missing file.

1.5.0 – December 14, 2012

  • Add support for the new SublimeVideo player.
  • Add support for the uid, name and settings attributes (mapping to data-uid, data-name and data-settings HTML attribute). See the Player settings page to learn more about these attributes.
  • Improvement: From now on, when you deactivate the plugin, its settings are deleted.

1.4.1 – August 30, 2012

  • Fix issue: major issue that was occuring for old PHP versions.

1.4.0 – August 30, 2012

  • Add support for the data_settings attribute (mapping to the data-settings HTML attribute).

1.3.2 – May 9, 2012

  • Fix issue: Autoplay and loop features didn’t work in IE < 9.

1.3.1 – March 26, 2012

  • Update: The lightbox shortcode is now [sublimevideo-lightbox][/sublimevideo-lightbox].

1.3.0 – March 26, 2012

  • Fix issue: src1 declared after src2 was leading to a wrong sources’ order in the generated code.
  • Add support for the floating lightbox feature in shortcode.

1.2.1 – January 5, 2012

  • Fix issue: HD switch wasn’t displayed in the live preview.
  • Add support for the “style” attribute in shortcode.

1.2.0 – December 2, 2011

  • Fix issue: SSL certificate verification.
  • Fix issue: Custom port was preventing the plugin from working properly.
  • Add support for the data_uid and data_name attributes (mapping to data-uid and data-name HTML attribute). See details.
  • Add support for HD sources. See details.

1.1.0 – November 30, 2011

  • Update for the new API endpoint which is https://api.sublimevideo.net.

1.0.0 – September 20, 2011

  • Initial release