Article
0 comment

Responsive video – Enhance SharePoint default player

It seems like the default media player is not the right tool for responsive design scenarios. This player might could be replaced with a custom one, but this custom one might might not integrate perfectly into SharePoint.

Let’s take a look how the behavior of the built-in media player can be improved to meet responsive requirements.

The media player web part

The player is a current state of the art media and video player. It renders an HTML5 video tag and provide a fallback video playback through Microsoft Silverlight.
Thought the embedding of a video on a SharePoint page the player will be automatically set to match the format of the video file.
In general this is good, but in the case of making a video response and scale across different screen resolutions this is a problem. The applied inline style avoids the proper scaling of the player. A behavior you don’t like to have on a responsive design.

Why not make the video responsive?

From a developer perspective, I would tend to apply some custom CSS and JavaScript code to make the video working. The thing to achieve the wanted behavior only needs a few tweaks. First, take a look at the issues with the media player.

Video size setting in the ribbon

Video size setting in the ribbon

The fixed width of the player is added via an inline style and pixel values. Setting the height and width properties to 100% will not fix this problem. Sorry. Only pixels are supported in those fields.
The player can be saved with 100% for height and width. In the background pixel values for the current screen resolution will be calculated. Those calculated values will be then applied to the media player control.
On smaller screen resolutions the video player bleeds. In my case 100% width ended up in 869px. The ribbon controls simply does a limited job.

The web part issue

Any object that you embed in a content zone is a web part. In our case the media player is a web part too. All SharePoint Web Parts have properties for height and width and are capable of auto-scale according to the available space in the design.
The media web part is an exception from this behavior.
Whenever you change the width and height value in the ribbon the same values will be applied to the web part as fixed values. This can be changed by simply modify the web part properties directly.

Auto-resize setting in web part properties

Auto-resize setting in web part properties

The video web part works a little bit better now. Changes to values in the ribbon reflect automatically on the web part. In this case your auto sizing will be overwritten by fixed values again.
May it be a responsive SharePoint design or just an Unbranded SharePoint page. It causes issues and might break the layout pretty bad.

Solving the issues

The first thing that needs to be done is to remove the ribbon section for setting height and width properties. This has the benefit that the auto sizing, setting will not be overwritten by accident.
The are two ways to do this. You can use a custom action to do this or apply a simple kiss the achieve the same effect. In my case I prefer to do it via CSS because it is easy to restore without custom code.
The snippet for this looks like this:

li[id^='Ribbon.ContextualTabs.Media.Options.Size'] {
    display: none;
}

As expected the section in now hidden from the end user.

Hidden ribbon setting to apply pixel values for web part

Hidden ribbon setting to apply pixel values for web part

One problem solve, one to go.
To solve the overall sizing issue of that web part simply edit the property to auto size.

Auto-resize setting in web part properties

Switched to auto-size web part width

After the web part will scale to 100%, but not the video inside the web part. This can be tweaked by using the following CSS (SASS).

// Incase use CSS just flatten the class to  
// .mediaPlayerContainer video { ... }
.mediaPlayerContainer {
    video {
        // 100% or add the maximum width of your videos here
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

Well, yes I use the video and there is a golden rule that you should avoid to assign values to an html tag. In this case it is no big issue because it will be only applied to the context of a media player container. I also can say the CSS is object released. After these changes the video is now capable to resize properly on different screen resolutions.

Mobile and desktop version of video

Mobile and desktop version of video

I think these small changes are acceptable. The code is small and easy to identify. In case something change in the SharePoint rendering, it can be easily fixed.

Optional – JavaScript to fix width and height issue of media web part

After embedding a video every author needs to be aware that the size properties of the web part needs to be changed to auto sizing. Without that the media play just will have the default behavior an will not resize properly. Setting the web part is also my recommended way.
In case people forget to change the properties this little JavaScript helps to achieve the same goal. It simply remove the inline style attached to the media player only when you browse the SharePoint page.

// return the current page mode
// BROWSE or DESIGN
var detectPageMode = function(){
    return $("input#MSOSPWebPartManager_DisplayModeName").val().toUpperCase();
}

var mediaPlayerFix = function(){
    
    // Check if page is in browse or design mode
    var curPageMode = detectPageMode();
    // If it is not browse mode do nothing
    if(curPageMode !== "BROWSE"){
        return;
    }
    // Query for media player container
    var mediaPlayers = $(".mediaPlayerContainer");

    // check if media player exists on page
    if(mediaPlayers.length !== 0){
    
        // loop over all media players
        mediaPlayers.each(function() {

            // get current player element
            var curElement = $(this);

            // remove inline styles from parent element  
            curElement.parent().removeAttr("style");

        });
    
    }
}

Final thoughts

The default media player integrated with SharePoint is actually better than you might think, and capable in responsive design scenarios. Another benefit is that Microsoft will maintain the player for you.
If you migrate the SharePoint to a newer version you don’t have to update all pages manually to embed a new custom player. The CSS impact in SharePoint is reduced to a minimum of code and easy to maintain.
This scenario shows how to deal with embedded videos stored directly in SharePoint. It currently don’t cover YouTube or Vimeo embedded videos. To make them responsive too, I will cover in an upcoming blog post.
So what do you think? Do you use the default media player or a custom one ? Please let me know how you are dealing with this issue.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.