Skip to content

Smart Embed

Getting Started

The smart embed allows you to simply embed your Media on your own sites. You can set a couple options and the embed will then embed the Media onto your pages.

<script src="https://{CLIENT_SHORTNAME}"></script>

The above would embed a Media Manager video with a width of 640px and a height of 360px. We also tell it which Media Manager Template to use. You are also required to pass your accounts shortname and finally we need to pass the Video ID.

<script type="text/javascript">

It is possible to display an optional download button for the media by marking the video downloadable under the publish settings of the specific video AND by adding:



Because your account can have multiple templates and your videos could be published to many different ones. Then its a good idea to set what template you wish to use as the view for your embed. You don't have to pass a template as it will automatically use a default template (most likely embed template).


Analytics Tagging

You can pass analytics tags to the smart embed by using the meta option.

//int example
mediamanager.meta.videoid = 1564;
//string example
mediamanager.meta.campaign = "myCampaign";

Analytics tags allow you to define your own data when it comes to recording Analytics. For instance in the above code we have created our own analytics tag of videoid .This allowed us to define our own ID for the video.

So when we look at the analytics, we can query the data based on this videoid. This can also be a great way to track users if your site has its own user system along with ids.


Javascript syntax applies, so when setting analytics tags, you must place them within "" unless you are dealing with boolean or int values. The analytics tag key itself should contain no spaces. You should replace them with _ if you require.


The Media Manager smart embed also allows you to make an embed responsive.


You can provide it with an aspect ratio which will tell the embed how to resize the video. By default 16:9 is assumed. You MUST also set the width and heights to be 100% so the embed can be responsive.



When using percentages, they must be within quotations to avoid any errors.


You can turn off autoplay by setting the autoplay option to false.



You can mute the player by default by setting the mute option to true.



Media Manager Player has a number of different events that you can listen to. It makes it easier for you by allowing you to set the events directly on the mediamanager object. A data object will be passed to the function. Depending on the type of event the object can be different.

mediamanager.onPlay = function(data){
    //code to run when media plays

Some events have a data parameter that is passed. This contains the data of the video that triggered the event.

Event Description
onPlay Triggered when media plays
onComplete Triggered when media completes (reaches the end)
onPause Triggered when media is paused
onTime Triggered every time video makes progress
onReady When player has loaded

You can also trigger events to pause or play the player using the mediamanager object.

mediamanager.pause(); //PAUSE PLAYER; //PLAY PLAYER