by

Changing Media Manager Video Sizes with Tridion: a Fullscreen problem

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 !important statements.

And the problem it causes

There’s just one, tiny little problem with this technique: it breaks fullscreen functionality .

Go ahead, try it.

I’ll wait.

.mmvideo1 [id*="sdlmm_"] {
     width: 600px !important;
     height: 338px !important;
}

The solution

Quite inconveniently, Media Manager doesn’t add any classes to its root element which would tell us that we’ve entered fullscreen. If it did, we’d have an easily identifiable hook for fixing fullscreen things. With that in mind, one approach could be to add a listener to JavaScript for the 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 height and width to 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 left to 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.

                            
.mmvideo2 [id*="sdlmm_"] {
     width: 600px !important;
     height: 338px !important;
}
.mmvideo2 [id*="sdlmm_"].projekktor[style*="fixed"] {
     height: 100% !important;
     width: 100% !important;
}
.mmvideo2 .projekktor[style*="fixed"] [id*="sdlmm_"] {
     height: 100% !important;
     width: 100% !important;
     left:0% !important;
}
.mmvideo2 .pptooltip,
.mmvideo2 .ppbackslide,
.mmvideo2 .projekktor[style*="fixed"] .pptooltip[class],
.mmvideo2 .projekktor[style*="fixed"] .ppbackslide[class]{
  height: auto !important;
  width: auto !important;
}
.mmvideo2 #pd_sdlmm_video__player_qsList{
  height: auto !important;
  width: auto !important;
 
}

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.

Comments are closed.