Best practices

Why inline styles are used

Inline styles in mave-player are intentionally implemented to:

• Improve Performance: Ensuring the player renders at the correct aspect ratio immediately.
• Enhance User Experience: Minimizing content reflow for a smoother visual transition.
• Boost Accessibility: Providing immediate styling to improve readability and usability.

Resolving CSP Issues

If your site enforces a CSP that blocks inline styles, you can consider one of the following approaches:

1. Adjust Your CSP Settings

Modify your CSP configuration to allow inline styles. For example:

Content-Security-Policy: style-src 'self' 'nonce-ABC123' https:;

Note: Using nonces or hashes is preferred over allowing all inline styles, as it maintains a higher level of security.

2. Externalize Inline Styles

Remove the inline styles from the <mave-player> tag and add them to an external stylesheet or a <style> block in your HTML:

• Pros: Eliminates CSP violations. • Cons: May introduce additional content reflow and delay in style application.

3. Retain Default Inline Styles

If possible, modify your CSP to permit the default inline styles provided by mave-player. This ensures optimal rendering and performance with minimal adjustments.

Styling mave-player

Customizing the appearance of mave-player has some limitations due to its design:

• Size and aspect-ratio: When changing the size, mave-player will always try to retain its initially defined aspect ratio.

• Customization options: For further customization, such as making the player behave more like a UI element, consider using <mave-clip /> instead.

• Theming and CSS variables: Use the available attributes, CSS custom properties, and theming options to adjust the look and feel without overriding core styles.