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.
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">
mediamanager.width(640);
mediamanager.height(360);
mediamanager.template("{TEMPLATE_ID}");
mediamanager.client("{CLIENT_SHORT_NAME}");
mediamanager.video("{VIDEO_ID}");
mediamanager.downloadable(false);
mediamanager.embed();
</script>
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:
Templates
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.
Warning
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.
Responsive
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.
Warning
When using percentages, they must be within quotations to avoid any errors.
Autoplay
You can turn off autoplay by setting the autoplay option to false.
Muting
You can mute the player by default by setting the mute option to true.
Events
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.
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.