For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
StatusSupportDiscussionsLog inSign Up
Docs HomeAPI ReferenceVideo on DemandAI FeaturesLive StreamingVideo PlayerVideo DataCloud PlayoutRecipes
Docs HomeAPI ReferenceVideo on DemandAI FeaturesLive StreamingVideo PlayerVideo DataCloud PlayoutRecipes
  • Player SDKs
    • Introduction
  • Web player
    • Install the FastPix web player
    • Play uploaded videos
    • Handle playback errors
      • Adjust player layout and UI
      • Set the branding color
      • Set the aspect ratio
      • Set the controls backdrop color
      • Show or hide player controls
      • Display a title on the video
  • Android player
    • Install FastPix Android player
    • Set up the player
    • Play uploaded videos
    • Handle playback errors
  • iOS player
    • Install FastPix iOS player
    • Play uploaded videos
    • Handle playback errors
  • Flutter player
    • Install FastPix Flutter player
    • Play uploaded videos
    • Handle playback errors
LogoLogo
StatusSupportDiscussionsLog inSign Up
On this page
  • What is the controls backdrop?
  • How to enable and customize the controls backdrop
  • Use case scenarios
  • High-contrast UI for improved accessibility
  • Thematic customization for brand identity
  • Enhancing readability in low-light or dark-themed videos
Web playerPlayer UI

Set the controls backdrop color

Was this page helpful?
Previous

Show or hide player controls

Next
Built with

FastPix lets you set a semi-transparent backdrop behind controls using —controls-backdrop-color for better contrast and brand fit.

Customizing the controls backdrop color in FastPix Player allows developers to improve the visibility and aesthetics of playback controls. This customization is particularly beneficial when video content may obscure control visibility or when branding consistency is desired.


What is the controls backdrop?

The controls backdrop is the semi-transparent background layer that appears behind video playback controls, such as play/pause buttons, the progress bar, and volume controls. This layer enhances the clarity of controls when interacting with the player or pausing a video. By default, FastPix Player does not display a backdrop, so the controls overlay directly on the video content.


How to enable and customize the controls backdrop

To enable and set the backdrop color, use the --controls-backdrop-color CSS variable. You can specify the color using standard CSS color formats, including rgb, rgba, hex, or hsl.


Example configuration:

1fastpix-player { 
2  --controls-backdrop-color: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */ 
3}

This code snippet sets a black backdrop with 60% opacity, enhancing the visibility of the controls without completely covering the video.


Use case scenarios

High-contrast UI for improved accessibility

Scenario: You are building a video player for a platform where a significant portion of users have visual impairments. Ensuring high contrast between controls and the video content is crucial to meet WCAG 2.1 accessibility guidelines.

Implementation: By setting a high-contrast controls backdrop, such as rgba(0, 0, 0, 0.8) for light-themed controls or rgba(255, 255, 255, 0.8) for dark-themed controls, you can make the controls more visible and accessible.


Thematic customization for brand identity

  • Scenario: Your website has a specific brand color scheme, and you want FastPix Player to match seamlessly while maintaining usability.
  • Implementation: Customize the controls backdrop using a brand color that fits the website’s theme, ensuring it remains semi-transparent to not completely obscure the video. For example, using --controls-backdrop-color: rgba(34, 34, 59, 0.5); could provide a subtle yet thematic integration.

Enhancing readability in low-light or dark-themed videos

  • Scenario: You are hosting videos that are predominantly dark or low-light, making it difficult for users to see the playback controls.
  • Implementation: Applying a lighter backdrop color, such as rgba(255, 255, 255, 0.5), can help ensure that the controls are readable against the dark video content without being too intrusive.

Example configuration for high accessibility:

1fastpix-player { 
2  --controls-backdrop-color: rgba(0, 0, 0, 0.8); /* Dark backdrop for light controls */ 
3}

In this example, the dark backdrop ensures that light-colored controls remain clearly visible and accessible to all users.