Media Player Web Part in SharePoint minimum size ( or, there is more than one way to skin the media player web part )

  • Article

Let’s say you want to use the Media Player web part to enhance your web site by playing an audio file. Of course, you do not want the component to take too much visual space , and if at all possible, you would like to only display the control buttons (Play/Pause, Stop, Mute) so that the visitors will have the ability of turning off the sound if they want to.

However, when you resize the Web Part to , say 100x 50 you notice that the controls are not really responsive and you might need to click around to find the exact “sweet spot” where they actually respond.

Why?

Well, mainly because the Media Player component behind the web part is primarily thought for playing video content , and for that you do not want the control to be under a specific size ( it would not make a lot of sense to display a video in a tiny little square). As such , the control OOB recommended limits ( as to how small can it be ) are 200 x 200 px (much like other media players online). If you need to have the control smaller than this size, a bit of customization would be required.

What needs to be done is to create a new “skin” for your Media Player by making copy of the file “\Style Library\Media Player\AlternateMediaPlayer.xaml”, and manually altering the file , then apply this modified “skin” to your control. (As usual, do not directly modify the skin but rather use your own modified copy)

For Example:

 

If I want the Play/Pause Button to be smaller , Look for the following section:

<ToggleButton x:Name="PlayPauseButton" Width="30">
        <ToggleButton.Template>
          <ControlTemplate>
            <Grid x:Name="RootElement" Background="Transparent">
              <Path x:Name="PlayButtonPath" Fill="#FF000000" Height="16" Width="16" Stretch="Uniform" Data="M 0,32.7838C 0.48,33.2638 1.24,33.2………..8L 0,32.7838 Z " />
              <Path x:Name="PauseButtonPath" Fill="#FF000000" Height="16" Width="16" Stretch="Uniform" Opacity="0" Data="M8.2669983,0 L9.0669994,0 C9.9469986,0 10.667,…………    />

Modify the sizes and save the file.

Upload it as MYAlternateMediaPlayer.xaml and publish it.

Go to your page and edit the Media Player Web Part. Clicking on the Styles button in the middle of the ribbon should allow you to select the new skin. Apply and check the results.

You should be able to resize the Web Part to match your individual needs.

Of course, manually modifying the XAML is not something that comes in handy to most of us ( congrats to those of you who can ), that’s why , for enhanced features, ease of use , rapid development and most important in design, WYSIWYG, the recommended tool would be Expression Blend. See here for customizing options for the Silverlight Controls https://msdn.microsoft.com/en-us/library/gg701782.aspx