SDL has this spiffy little product called Media Manager. Media Manager is a tool for uploading and managing multimedia assets, and it does a really good job at working with video, in particular. With videos, you could upload a video in just about any format imaginable, and Media Manager would do some magic behind the scenes to convert that video to the right format for the right web browser. This makes it incredibly helpful, especially now that web browsers can play videos natively. But Media Manager was lacking on one thing: responsive videos.
But, quite happily, that’s not true any more.
The Old School Way
I presented on some Media Manager tips and tricks at the Tridion Developer Summit in Amsterdam last year. One of those tricks was how to make the videos responsive, which involved a small amount of CSS hackery with attribute selectors and overriding the dimensions. The only downside was that it didn’t work with fullscreen, so additional hackery was needed with some bizarre selectors to identify fullscreen, and then some tweaks to dimensions and controls.
The old school way amounted to some unusual CSS selectors, dimension overrides, and some techniques Rachel McCollin mentioned in a Smashing Magazine article.
The New School Way
SDL has some smart guys working for them, and they decided that all these CSS shenanigans were just a tad much. So they reduced the number of steps involved in making a Media Manager video responsive:
- Add
&responsive=trueto the distribution URL
Distribution URLs
So, if I’ve got this distribution URL
http://nationwide.dist.sdlmedia.com/Distributions/?o=DCF7FD8E-E793-4690-B280-9E5493C60B51
It now becomes this:
http://nationwide.dist.sdlmedia.com/Distributions/?o=DCF7FD8E-E793-4690-B280-9E5493C60B51&responsive=true
Embedded Distributions
If you’ve got this script:
<script type="text/javascript" language="javascript" src="http://nationwide.dist.sdlmedia.com/Distributions/embed/?o=DCF7FD8E-E793-4690-B280-9E5493C60B51">
</script>
It becomes this:
<script type="text/javascript" language="javascript" src="http://nationwide.dist.sdlmedia.com/Distributions/embed/?o=DCF7FD8E-E793-4690-B280-9E5493C60B51&responsive=true">
</script>
And that means that this will play nicely, where ever I put it on a web page.
The big idea
SDL Media Manager is responsive=true now.