Aspect ratio

The aspect ratio of the fp-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 fp-player seamlessly to different video formats while preserving the quality and visual appeal of your content.

Example CSS implementation:

fp-player { 
  --aspect-ratio: 16/9; 
} 

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