Customize control sections

The fp-player element allows you to customize and hide specific control sections to tailor the player's interface to your needs. This flexibility lets you create a streamlined and focused user experience by showing only the controls that are relevant to your application.

Hiding control sections

You can hide various control sections by setting specific attributes to none. Here are the controls you can customize:

Bottom right controls

These controls are located at the bottom right of the player interface. By default, they include buttons like full screen, settings, and other interactive elements.

• --bottom-right-controls: Hides the bottom right controls on the desktop version of the player.
• --bottom-right-controls-mobile: Hides the bottom right controls on the mobile version of the player.

Mobile middle controls

Controls which are positioned in the middle of the player interface on mobile devices, offering quick access to essential functions.

• --mobile-middle-controls: Hides the middle controls on the mobile version of the player.

Additional controls

Play button: The play button that appears after clicking the initial play button can be hidden using this attribute:

• --play-button-initialized: Hides the play button that appears after the initial play button is clicked.

Progress Bar: For the progress bar (seek bar), you can use this attribute:

• --progress-bar: Hides the progress bar in the player.

Example to hide control sections

Here is an example of how to implement these customizations:

fp-player {  
    --bottom-right-controls: none;  
    --bottom-right-controls-mobile: none;  
    --left-controls-bottom: none;  
    --left-controls-bottom-mobile: none;  
    --middle-controls-mobile: none;  
    --volume-control-mobile: none; 
    --play-button-initialized: none;  
    --progress-bar: none;  
} 

By customizing these controls, you can create a tailored user experience that aligns with your application's needs. Hiding unnecessary controls helps reduce clutter and focuses the user's attention on the most important features, enhancing the overall user experience.