At my Media Manager presentation at Tridion Developer Summit a few weeks ago, I showed a trick for resizing your Media Manager videos outside of Media Manager’s outlets.
This morning, I learned that there was a bug with the approach, and this afternoon, I found a fix. Let’s discuss.
The Original Technique
So, if you’ve seen my slide presentation, on slide 17 I provided a way that you could override the size of a video with CSS that you could manage via Tridion. The solution takes advantage of a lesser known way to select elements with the attribute selector. Specifically, we’re using a substring attribute selector technique that I’ve outlined in the past. What we do is look for all elements whose id contains
sdlmm_ and change the dimensions with some
And the problem it causes
There’s just one, tiny little problem with this technique: it breaks fullscreen functionality .
Go ahead, try it.
fullscreen-enter event, add a class, and then fix what we need to with that class.
But, my original solution was CSS-only — and I want to keep it that way.
Keeping it in the CSS
We can keep it in the CSS with a few more shenanigans. Media Manager doesn’t use the fullscreen API to make a video go fullscreen. Instead, it adds some inline styles. And inline style are added via a
style attribute. Are you smelling what I’m cooking?
We have a hook that’s being provided by Media Manager; It’s just not obvious. What we do is look for the element with the
projekktor class— but only when it’s got a
fixed value somewhere in the
style attribute — because it only gets set to
position: fixed when it’s in fullscreen mode.
Then we set the
100%. The next step is to drill down a tad deeper, while still using the
.projekktor[style*="fixed"] selector to find other elements with an
id which contains
sdlmm_. We make sure the same 100% dimensions are applied (because they wouldn’t be with the previous selector), and then we’ll set
0%, because SDL’s jQuery is automagically computing this.
The last step is to tackle the control buttons. There are a few buttons in the toolbar that are targeted thanks to the selector. We want to return these pieces back to their original dimensions. In order to do this, we employ a bizarre case with the attribute selector where we select on the fact that it has an attribute called
class. This gives us the specificity-bump to return those buttons to normal.
And now we have a solution. I’m a little disappointed that it jumps so many more lines of CSS. Maybe I can optimize it later.
The Big Idea
If you’re using my original fix, but the outlet doesn’t have a fullscreen button, then you don’t need to worry about this. But if you do, add a few more lines of CSS, and you’ll be ok.
What would be great is if we could upload CSS directly into Media Manager — so that we wouldn’t have to store this solution in Tridion. But until that day comes, drop these 13 lines into your CSS file, and you’ll be golden.