Documentation Center

Media Manager module's HTML design

To customize the Media Manager module's custom players in SDL Digital Experience Accelerator (DXA), you must modify their HTML design.

You can find the HTML design for Media Manager is located in the DXA GitHub repository. The design consists of three script files that as part of the publishing pipeline are merged into various other scripts and become available to DXA. You can add and modify these scripts to control how the Media Manager module behaves on your site. Using custom players together with the Media Manager views, and the contextual view switching functionality, gives you full control of viewing and playing the Media Manager content in DXA.

There are the following scripts for Media Manager custom players that you can find in the DXA GitHub repository at MediaManager\src\system\assets\scripts:
  • carousel-mm.js
  • html5player.js
  • resolutionOverlay.js
The first two scripts are merged into a single script called main.js. This is controlled by providing a template at src\templates\partials called module-scripts-footer.hbs. This file is used to specify the scripts that will be merged into the main.js file during publishing of the HTML design. Here is an example of module-scripts-footer.hbs contents
{{!-- footer scripts --}}
<script src="/system/assets/scripts/html5player.js"></script>
<script src="/system/assets/scripts/carousel-mm.js"></script>
The resolutionOverlay.js script is used only during a staging environment to provide information to the editor about the Media Manager content. Since this is only required in staging, it is merged into a script called xpm.js. To control what gets merged into xpm.js another template, located at src\templates\partials\module-scripts-xpm.hbs, is used. Here is an example of module-scripts-xpm.hbs content:
{{!-- staging scripts --}}
<script src="/system/assets/scripts/resolutionOverlay.js"></script>
You can add or customize any of the scripts and by using one of these two templates easily control how they get added to your page in a live or staging environment:
  • carousel-mm.js - this script provides a carousel control that works with Media Manager content
  • html5player.js - this script plays Media Manager video content using the HTML5 video player.