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
  • Change player aspect ratio
Web playerPlayer UI

Set the aspect ratio

Was this page helpful?
Previous

Set the controls backdrop color

Next
Built with

FastPix lets you set a custom aspect ratio (e.g. 16:9, 4:3) on the video player to prevent distortion.

The aspect ratio of the FastPix Player determines the proportional relationship between its width and height, which is crucial for correctly displaying video content correctly without distortion. By default, the aspect ratio is typically set to 16:9, a standard for widescreen video formats. However, you can customize this aspect ratio to suit various video dimensions, such as 4:3 for older video content or 21:9 for ultra-wide cinematic experiences.

Adjusting the aspect ratio ensures that videos are displayed in their intended dimensions, preventing stretching or cropping that can occur when the aspect ratio is mismatched. This customization capability is particularly useful for maintaining visual integrity across different video types and screen sizes, providing viewers with a consistent and immersive viewing experience.


Change player aspect ratio

Adjusting the aspect ratio is straightforward using CSS variables. The aspect-ratio variable allows you to specify the desired ratio as a fraction (e.g., 16/9). This flexibility allows you to adapt the player seamlessly to different video formats while preserving the quality and visual appeal of your content.

Example CSS implementation:

1fastpix-player { 
2aspect-ratio: 16/9; 
3}

By always customizing the aspect-ratio, you can align the player with your specific content needs, ensuring that it fits perfectly within your application’s design.