As I’ve mentioned in the past, I’ve been working with Media Manager pretty heavily these last few months. One thing that I’ve noticed is that there’s no real jQuery plugins out there to assist with embedding Media Manager videos. Well, that’s no longer the case!
Why Create a Plugin?
SDL’s Media Manager certainly doesn’t need a plugin. You can get along just fine without using a jQuery plugin —but if you can make life 15% easier for a client, why shouldn’t you? There are two major motivations for making this plugin:
It’s about decisions
When you upload a video into Media Manager, you get three choices for what you can do with it:
- Create an iframe
- Embed it on a page
- Make an Ajax call
The challenge is that you have to make this choice between Media Manager and Tridion — and once you’ve made your choice, you can’t really change it. If a “media manager ” schema field needs to contain the embed script, instead of the url, this requires rework of your component template. If we want to make an Ajax call instead, now we need to write some JavaScript. Experience has taught me that content authors can develop a severe allergy to writing JavaScript at the strangest times. So, this plugin acts as a ‘wrapper’ around all three options; you can switch between the approaches without touching JavaScript.
So, it’s also about control
The decision to iframe or embed the video may not seem like something relevant to a content author, but maybe it matters to the developer. On one page, you may just want to show a video, while on another you need to manipulate controls for it. In one component template, it needs to be 500px wide, but another only 200. Wouldn’t it be nice if one outlet could have five different sets of dimensions?
Why…yes, future-self, it would be nice to control the dimensions of a Media Manager video without going to Media Manager…
It’s a different kind of plugin
I mention usage of the plugin over at the GitHub repo, but it bears repeating here: this is not your typical jQuery plugin. You control the parameters of this jQuery plugin exclusively from the HTML.
The plugin works off of data-* attributes. It relies on the value of a data-video attribute being a valid stringified JSON object. Here’s an example:
Now, if you wanted to get each of those values from a schema field, that’s going to be a pretty ugly and long mess of ternary operators in Razor. For that reason, you don’t have to use just one data-video attribute. Each parameter can be its own data-video-* attribute:
Fork me, Please!
I’ve set up a Github Repo for all-things Media Manager. The repo contains, not only this jQuery plugin, but HTML examples for a filmstrip, too. In addition, I have a JavaScript module that you’re free to look at which has some nifty examples of other ways to manipulate a Media Manager video without getting the outlet involved.