SublimeVideo

Documentation

Check out our Getting Started and FAQ pages to start, and if you have any problems take a look at our Troubleshooting page.

WordPress plugin

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 provide 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’ll be selected automatically.
  5. In the plugin settings page you can also set the default width for all the videos you will embed.
  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

Poster_frame
The SublimeVideo WordPress plugin’s poster frame browser.

Images in the browser are ordered decreasingly 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

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

Shortcode documentation

A basic generated shortcode looks like this:

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

Poster frame

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

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

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

Preload

Usage: preload="none|metadata|auto" (defaults to “none”)

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

Statistics-related attributes

The following attributes are useful if you’re using the SublimeVideo statistics feature.

Usage: data_uid="unique_id" and data_name="A nice name here"

data_uid maps directly to the data-uid attribute while data_name maps to the data-name attribute. To learn more about the data-uid and data-name attributes, please consult our Optimize <video> elements for stats page.

Autoplay

Usage: autoplay (without value)

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

Usage: loop (without value)

DOM id

Usage: id="a_unique_id"

CSS classes

Usage: class="sublime another_class"

You can add more classes to the class attribute as long as they are space-separated. Or, you can even remove the “sublime” class entirely if you prefer to use the JavaScript API to prepare your <video> elements.

CSS style

Usage: style="display:none;"

Troubleshooting

I don’t see any sites in the settings page, why?

It’s probably because your WordPress site’s domain is not properly registered in your SublimeVideo account. Please find the possible reasons why in the Troubleshooting page.

Changelog

1.2.1

1.2.0

1.1.0

1.0.0