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.
- Download the plugin from the WordPress Plugin Directory and upload the
sublimevideo-officialfolder to the
/wp-content/plugins/directory. Alternatively, you can install the plugin via the Install Plugins section in your WordPress admin area.
- Activate the plugin through the ‘Plugins’ menu item in your WordPress admin area.
- 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.
- 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.
- 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.
- Go to the post editor, you should see the new 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.
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).
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.
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.
My theme is responsive, how can I make my videos responsive too?
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
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.
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.
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
- Deprecate the
1.7.0 – March 6, 2013
lightbox_settingsshortcode attribute to allow to pass lightbox specific settings.
- When a
youtube-idis set in the
uidis 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
settingsattributes (mapping to
data-settingsHTML 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_settingsattribute (mapping to the
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
1.3.0 – March 26, 2012
- Fix issue:
src2was 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_nameattributes (mapping to
data-nameHTML 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