Table of Contents
The Auto Embed and Manual Embed add-ons allow your audience to easily share your videos by embedding them into their own sites or elsewhere on the web. Both add-ons will display an embed button on the top-right corner of the player which opens a pane showing the actual embed code and the possibility to change the embedded player size.
The main embed button in our Classic player.
The embed pane.
The Auto Embed add-on is the easiest way to enable embedding for your videos. With this add-on you don’t need to create an HTML page for every video you want to be embeddable: the add-on takes care of generating those files for you and automatically keeping them in sync with the original
<video> elements you’ve placed on your site.
To enable this feature by default for you player(s), subscribe to the Auto Embed add-on and activate it via your site’s Player editor page on MySublimeVideo. You can also only use this feature on a per-video basis via the Video Publishing Assistant.
- You must set a unique ID for your videos via the data-uid attribute.
- Your video sources URLs must not be dynamic (i.e. different on each request).
If you’re not subscribed to the Auto Embed add-on, you will have to follow the 2 steps below to enable embedding for your videos:
- Create a “special” HTML page for the video you want to be embeddable, this will be the iframe content.
- Configure the embed button by providing the embed URL (URL of the HTML page created in the previous step) and its default size.
You need to create an HTML page for every video you would like to make available for embedding. You need to host this page on one of the domains you have registered on MySublimeVideo.
The final snippet of code that your audience will copy from the embed pane and share is an
<iframe> element pointing to that HTML page.
- Replace YOUR_TOKEN with your actual site’s token (you can find it in the My Sites page alongside your site’s domain).
- Replace the
<video>element with the code generated by the Video Publishing Assistant but change the following two things:
– Don’t specify the
heightattributes, the player will automatically fill the entire iframe.
style="display:none". It’s optional but we recommend it to prevent UI flickering when the iframe is initially loaded.
Host this file on a domain that is registered on MySublimeVideo. For instance, if your registered domain is yourdomain.com, you could save this page at http://yourdomain.com/embeds/video1.html.
Like most of our add-ons, you can set up its default options that should apply to all of your videos from your site’s Player editor page on MySublimeVideo. But you can also set more options and override the default ones on a per video basis via the Video Publishing Assistant, or manually, using the data-settings attribute directly on the
The table below gives you an overview of all the embed settings available and from where you can actually set them up.
|Embed setting||Player editor||Video Publishing Assistant||Notes|
|Enable/Disable the embed button||*|
|Enable/Disable the auto embedding feature|
|Embed URL||The URL of the HTML page you created in step 1 of Manual embedding.|
|Default embed size|
*: When manual embedding is enabled, you still need to provide a valid embed URL in order for the embed button to show up in the player.
Allows you to enable or disable the embed button and pane feature. Please note that unless you’re using the auto embedding feature, an embed URL must be provided in any case, otherwise the embed button won’t appear (see embed-url).
true– (Default) Enable embed button and pane feature.
false– Disable the embed button and pane feature.
<video class='sublime' data-embed-enable='false'> ... </video>
Defines the type of embedding you want to use: manual or auto. Auto embedding is only available if you’re subscribed to the Auto embedding add-on. If you set the type to “auto”, you must set a unique ID for your videos.
manual– (Default) Use the manual embedding feature.
auto– Use the auto embedding feature.
<video class='sublime' data-embed-type='auto'> ... </video>
Don’t set this setting if you’re using the auto embedding feature.
Defines the URL of the HTML page with the embeddable player (a.k.a the iframe content). This setting is required – the embed button will only appear if an URL is specified.
any valid url
<video class='sublime' data-embed-url='http://yourdomain.com/embeds/video1.html'> ... </video>
Defines the default embed size. The user will be able to adjust this size directly from the embed pane. If no default embed size is specified, the player size will be used instead (and, if necessary, the height will be adjusted to respect the original aspect-ratio of the video).
height– A string containing both width and height values separated by a ‘x’.
width– In case you want the height of the embed to be dynamically computed (when the user clicks on the embed button to show the embed pane) to automatically match the video aspect-ratio.
<video class='sublime' data-embed-size='640x360'> ... </video>