> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Show or hide player controls

> Customize FastPix Player to show or hide controls like play/pause, volume, captions, and fullscreen via CSS variables.

Customize FastPix Player to show or hide controls like play/pause, volume, captions, and fullscreen via CSS variables.

Customizing controls visibility in FastPix Player allows you to create a tailored user experience by selectively showing or hiding various player controls. This level of customization ensures that the player interface aligns with your specific design and functionality requirements.

\


## Hiding specific controls

To hide specific controls within the player, you can use CSS variables. By setting the desired variables to `none`, you can remove certain elements from the player interface, simplifying the user experience or focusing attention on key functions.

Example CSS for hiding controls:

```css
fastpix-player { 
    --audio-track-button: none; /* Hide audio track button */  
    --cc-button: none; /* Hide closed caption button */  
    --pip-button: none; /* Hide PiP mode button */  
    --resolution-selector: none; /* Hide quality selector */  
    --title: none; /* Hide title */  
    --progress-bar: none; /* Hide seek bar */  
    --initial-play-button: none; /* Hide initial play button */  
    --play-button-initialized: none; /* Hides or shows the play button after the player is initialized */  
    --playback-rate-button: none; /* Hide playback rate button */  
    --full-screen-button: none; /* Hide full-screen button */  
    --time-display: none; /* Hide time display */  
    --volume-control: none; /* Hide volume control */  
    --backward-skip-button: none; /* Hide backward skip button */  
    --forward-skip-button: none; /* Hide forward skip button */ 
    --loading-indicator: none; /* Hide loading indicator */  
} 
```

\


## Description of controls

\


| **Feature variable**            | **Description**                                                              |
| ------------------------------- | ---------------------------------------------------------------------------- |
| **`--audio-track-button`**      | Lets users switch between available audio tracks.                            |
| **`--cc-button`**               | Toggles subtitles or closed captions for the video.                          |
| **`--pip-button`**              | Enables Picture-in-Picture mode to watch video in a small, resizable window. |
| **`--resolution-selector`**     | Allows users to select video quality options (e.g., 720p, 1080p).            |
| **`--loading-indicator`**       | Displays a visual cue to indicate that the video is buffering or loading.    |
| **`--title`**                   | Displays the title of the current video.                                     |
| **`--progress-bar`**            | Allows users to navigate to different parts of the video.                    |
| **`--initial-play-button`**     | The play button shown before the video starts.                               |
| **`--play-button-initialized`** | The standard play/pause toggle during video playback.                        |
| **`--playback-rate-button`**    | Allows users to adjust the video speed (e.g., 1x, 1.5x, 2x).                 |
| **`--full-screen-button`**      | Toggles full-screen mode for a larger viewing experience.                    |
| **`--time-display`**            | Shows the current playback time and total duration of the video.             |
| **`--volume-control`**          | Lets users adjust the volume level.                                          |
| **`--backward-skip-button`**    | Skips backward by a preset number of seconds.                                |
| **`--forward-skip-button`**     | Skips forward by a preset number of seconds.                                 |

\


Each control can be shown or hidden using CSS variables, allowing for a fully customizable video player interface.

\


## Hide control sections

The `fastpix-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 focused user experience by showing only the controls that are relevant to your application.

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:

```css
fastpix-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.