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.
sublimevideo-officialfolder to the
/wp-content/plugins/directory. Alternatively, you can install the plugin via the Install Plugins section in your WordPress admin area.
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 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.
Note for YouTube videos: If you want to use the default poster frame from YouTube, don’t choose any poster frame here.
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.
Copy and paste the YouTube video URL into the “Your YouTube video ID” field, and that’s it!
Media library or external video
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.
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).
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.
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"]
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).
We recommend using a poster frame with dimensions proportional to the
height attributes present in the shortcode.
[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
[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.
[sublimevideo settings="initial-overlay-enable:false; volume-enable:false"]
You can set any Player settings through the
To learn more about the settings you can set, please consult the Player settings page.
[sublimevideo uid="unique_id" title="A nice title here"]
You can set the
title Player settings through the
data_name are now deprecated, but will continue to be supported for back compatibility reasons.
To learn more about the
title attributes, please consult our Real-Time Statistics add-on page.
[sublimevideo-lightbox lightbox_settings="overlay-opacity:0.9; on-open:nothing"]Play video[/sublimevideo-lightbox]
You can set any Lightbox settings through the
To learn more about the settings you can set, please consult the Lightbox settings page.
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.
Loops the video once its playback ends.
Allows you to set a DOM id for your
<video>. If you don’t set an id, the plugin will generate one for you.
[sublimevideo class="sublime another_class"]
Allows you to set CSS classes for your
Be sure to add the sublime
class manually if you use this shortcode attribute.
Allows you to set CSS inline style for your
preload to “none” will save you bandwidth by preventing preloading (buffering) of the video upon page load.
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.
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
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.
If you have any other issue, please visit our Troubleshooting page.
lightbox_settingsshortcode attribute to allow to pass lightbox specific settings.
youtube-idis set in the
uidis set to the YouTube video id.
settingsattributes (mapping to
data-settingsHTML attribute). See the Player settings page to learn more about these attributes.
data_settingsattribute (mapping to the
src2was leading to a wrong sources’ order in the generated code.
data_nameattributes (mapping to
data-nameHTML attribute). See details.