Office 365 & SharePoint Video – Responsive

In 2013 Microsoft introduced the Media Web Part / MediaFieldControl which allows most video formats to be played from within SharePoint.  It works both in SharePoint on-premises and Office 365 SharePoint / SharePoint Online and will meet the needs of many organisations who wish to provide video content within their SharePoint sites.

This article looks at how you can use what Microsoft have provided to present your video content in SharePoint.  Specifically covered are;

  • Site Structure
  • Presenting a Video on a Page
  • Making the Video and the Page Responsive
  • Video Formats
  • Older Browsers
  • Gotchas
  • Bringing it all Together

The more impatient among us can skip to the bottom of the article and download a solution package which contains a responsive page layout for video and which can be deployed to SharePoint on-premises or Office 365 / SharePoint online.

Site Structure

Hosting a few Gb of videos within a SharePoint site collection is not too much of a problem.

For those wishing to create their own YouTube! it is worth looking at site structure (i.e. separate site collections or even web applications for video) or alternative variations such as Office 365 video.

Presenting a Video on a Page

Ok so you can add the Media Web Part directly to a page in SharePoint.

But what site visitors really want is for the video to be presented to them with nice formatting and surrounding text before they even play it.  In the example below the introductory text is to the left, the video to the right and then the full article text is underneath.

VideoPage-Med

A good approach to achieve this kind of presentation is a page layout for which the body markup includes a MediaFieldControl.  Example markup is shown below.

The inclusion of a media field control means that the content author will not have to manually add a web part.  The user simply has to link in the video.  Furthermore configuration of the mediafieldcontrol can be controlled via the page layout mark-up.  Developers can adjust this mark-up and the change will reflect in all pages using the page layout.  If the content author adds web parts manually then you have to change each web part.

Assuming that you are creating your site columns via features the markup for the media control field itself is.

This field needs to be added to the “associated content type” of the page layout(s) that contain the media field control.

Making the Video and the Page Responsive

To get the video to be responsive we need to ensure that it always fits to 100% of the available area.

CSS to do this is applied and JavaScript is run to force inline styling on the video tag itself should this be required (SharePoint seems to do this when the user specifies a size).

The CSS styles the video web part.

The JavaScript is run in an edit panel. This panel only renders when the page is in display mode.  This stops the editing experience being compromised.  The script is scheduled to run when at least the SharePoint sp.js has loaded.  This scheduling ensures that the video tag is available on the page BEFORE the script runs.

The JavaScript finds and amends the video tag.  JQuery would have been a better solution to find and update the video tag but it seemed rather excessive to include the library to support just this one page layout.  If there is another reason to include JQuery this could be updated.

The page is then made responsive with a media query.

So now our video shrinks and grows and the page will respond to a narrow screen.  Below we show the page at a width considered narrow enough to stack the caption on top of the video.

VideoPage-Responsive

Video Format

From experience MP4 is the best format for cross browser and cross player compatibility (old browsers will fallback to silverlight).

The web.config for the SharePoint web application has configuration settings that control this to a certain extent.

Older Browsers

Older browsers will use Silverlight and won’t respond to the media query.  Other than this the video should play fine.  The Silverlight player doesn’t scale well to variable widths (you tend to get black borders around the video) so if you are looking at a lot of, for example, IE8 users then a fixed width approach can give more consistent results.

Silverlight will not play all the audio codecs that MP4 supports.  Test your videos with Silverlight in IE8 to be sure if that is a requirement.  If they won’t play convert them (perhaps using FFMpeg if you don’t have your own video editing software).

Gotchas

Why Chrome is Trying to Play my Video Using Silverlight?

This happens when there is no “Thumbnail” or at least SharePoint thinks there is not.  See the answer below on thumbnails.

Video Image / Thumbnail

SharePoint lets to you change the video image / thumbnail when you configure the media field control / media web part.

ChangeImage

From experience this does not work reliable in SharePoint 2013 and beyond (In SharePoint 2010 it worked well).

What the player wants to show is the thumbnail that you configured for your video when you uploaded it (or change properties on it).  See below.

ChangeThumbnail

The thumbnail you upload should be the exact same size as the video that it accompanies ie. a FHD (1920×1080) video should get a 1920×1080 thumbnail.

Deployment

To enable the page layout to be deployed to both on-premises SharePoint and Office 365 a Sandbox solution is the way to go.

UploadSolution

Once the solution is activated the page layout will be available for use in sites with publishing enabled along with the support fields and content types.

Bringing it All Together

Once you have downloaded and activated the solution you have the supporting page layout and content types.

Go to the site where you will host your video.

Upload an MP4 video.

Upload or create a thumbnail for the video.

Create a new page.

Change the page layout to Lite Brand Video 01

Marvel at your creation which should look something like the below.

VideoPage-Med

Downloads

Complete the form below to receive download links to files with support this and our other articles.

Please enter your email address

Newsletter Opt Out

 

 

Share