# 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.