docs

Best practices

Waarom we inline-stijlen gebruiken

De inline-stijlen in mave-player zijn bewust toegevoegd om:

• Prestaties verbeteren: de speler wordt direct in de juiste beeldverhouding weergegeven.
• Gebruikerservaring verbeteren: minder verschuivingen in de content zorgen voor een vloeiendere visuele overgang.
• Toegankelijkheid vergroten: direct toegepaste stijlen verbeteren de leesbaarheid en bruikbaarheid.

CSP-problemen oplossen

Als de CSP van je site inline-stijlen blokkeert, kun je een van de volgende oplossingen gebruiken:

1. Pas je CSP-instellingen aan

Pas je CSP-configuratie aan om inline-stijlen toe te staan. Bijvoorbeeld:

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

Let op: nonces of hashes hebben de voorkeur boven het toestaan van alle inline-stijlen, omdat dit een hoger beveiligingsniveau in stand houdt.

2. Verplaats inline-stijlen

Verwijder de inline-stijlen uit de tag <mave-player> en voeg ze toe aan een extern stylesheet of een <style>-blok in je HTML:

• Voordeel: voorkomt CSP-overtredingen. • Nadeel: kan extra verschuivingen in de content en vertraging bij het toepassen van stijlen veroorzaken.

3. Standaard inlinestijlen behouden

Pas je CSP indien mogelijk aan om de standaard inline-stijlen van mave-player toe te staan. Zo behoud je met minimale aanpassingen de beste weergave en prestaties.

mave-player vormgeven

Door het ontwerp zijn er enkele beperkingen bij het aanpassen van mave-player:

• Grootte en aspectverhouding: Als je de grootte wijzigt, probeert mave-player altijd de oorspronkelijk ingestelde beeldverhouding te behouden.

• Aanpassingsopties: Wil je de speler meer als een UI-element gebruiken, overweeg dan <mave-clip />.

• Thema’s en CSS-variabelen: Gebruik de beschikbare attributen, aangepaste CSS-eigenschappen en thema-opties om de vormgeving aan te passen zonder de kernstijlen te overschrijven.