How to add an Expand button to enlarge a custom player

Printer-friendly version
Audience / Tech Expertise: 

This article explains how to add an Expand button to enlarge a custom Kaltura Dynamic Player version 3 (KDP3) player in a web page.

Why enlarge a player?

Usually a player is displayed on a web page with many other elements.  

Full screen mode allows the user to view only the player without being able to use any other part of the web page. 

Enlarging the player enables easier viewing of the player while allowing the user to continue working in your web page.  

Adding an Expand button to a custom player

You can add an Expand button to a player to enable a user to enlarge the player on the web page. 

Note: In Kaltura MediaSpace, a standard player includes an Expand button. A custom player does not include an Expand button by default. 

To add an Expand button to a custom player

  1. Implement a JavaScript function that modifies your CSS to accommodate a larger player by modifying the size and layout of web page elements adjacent to the player. For example, in the web page examples in Why enlarge a player?, a JavaScript function causes the gallery on the left of the player to move below the player when the player is expanded.
    Note: MediaSpace provides the kmh.expandShrinkPlayer JavaScript function. No additional JavaScript function is required for MediaSpace.
  2. In the Kaltura Management Console (KMC), select the Studio tab.
  3. Highlight a player and select Edit from the Actions menu, or select a new player.
  4. In the Edit Player or Create New Player window, select the Features tab and click Additional parameters and plugins

    The Additional parameters and plugins menu, including a plug-in field, is displayed.
  5. For MediaSpace players: Paste the Expand button code in the plug-in field and click go.
    For other players:
    a. In the Expand button code, replace kmh.expandShrinkPlayer in the JavaScript call with the name of your JavaScript function (see step 1). 
    b. Paste the modified Expand button code in the plug-in field and click go.
  6. (Optional) In the Additional parameters and plugins Preview pane, click the Preview button to display the player with the Expand button.
  7. Click Save Changes.

Code for the Expand button 

v2 HTML5 Player: 

expandToggleBtn.plugin=true&expandToggleBtn.kClick=kmsExpandShrinkPlayer

Legacy Flash Player (aka KDP3):

expandToggleBtn.plugin=false&expandToggleBtn.className=Button&expandToggleBtn.maxWidth=20&expandToggleBtn.toggle=true&expandToggleBtn.upIcon=openWideScreenIcon&expandToggleBtn.downIcon=openWideScreenIcon&expandToggleBtn.overIcon=openWideScreenIcon&expandToggleBtn.disabledIcon=openWideScreenIcon&expandToggleBtn.selectedUpIcon=closeWideScreenIcon&expandToggleBtn.selectedDownIcon=closeWideScreenIcon&expandToggleBtn.selectedOverIcon=closeWideScreenIcon&expandToggleBtn.selectedDisabledIcon=closeWideScreenIcon&expandToggleBtn.color2=0xDDDDDD&expandToggleBtn.color1=0xFFFFFF&expandToggleBtn.buttonType=iconButton&expandToggleBtn.relativeTo=ControllerScreen&expandToggleBtn.position=lastChild&expandToggleBtn.tooltip=Expand player&expandToggleBtn.upTooltip=Expand player&expandToggleBtn.selectedTooltip=Shrink player&expandToggleBtn.kClick=jsCall('kmh.expandShrinkPlayer')

 

FAQ Type: 
(51195 reads)