Dokumente

Best Practices

Warum Inline-Stile verwendet werden

Inline-Stile im Mave-Player werden absichtlich implementiert, um:

• Leistung verbessern: Sicherstellen, dass der Player sofort im richtigen Seitenverhältnis rendert.
• Verbesserung der Benutzererfahrung: Minimierung des Inhaltsrückflusses für einen reibungsloseren visuellen Übergang.
• Steigerung der Barrierefreiheit: Bietet sofortige Gestaltung zur Verbesserung der Lesbarkeit und Benutzerfreundlichkeit.

Beheben von CSP-Problemen

Wenn Ihre Site einen CSP erzwingt, der Inline-Stile blockiert, können Sie einen der folgenden Ansätze in Betracht ziehen:

1. Passen Sie Ihre CSP-Einstellungen an

Ändern Sie Ihre CSP-Konfiguration, um Inline-Stile zuzulassen. Zum Beispiel:

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

Hinweis: Die Verwendung von Nonces oder Hashes ist der Zulassung aller Inline-Stile vorzuziehen, da dadurch ein höheres Maß an Sicherheit gewährleistet wird.

2. Externalisieren Sie Inline-Stile

Entfernen Sie die Inline-Stile aus dem <mave-player>-Tag und fügen Sie sie einem externen Stylesheet oder einem <style>-Block in Ihrem HTML hinzu:

• Vorteile: Eliminiert CSP-Verstöße. • Nachteile: Kann zu zusätzlichem Inhaltsumfluss und Verzögerungen bei der Stilanwendung führen.

3. Behalten Sie die Standard-Inline-Stile bei

Ändern Sie nach Möglichkeit Ihren CSP, um die von mave-player bereitgestellten Standard-Inline-Stile zuzulassen. Dadurch wird eine optimale Darstellung und Leistung mit minimalen Anpassungen gewährleistet.

Styling-Mave-Player

Das Anpassen des Erscheinungsbilds des Mave-Players weist aufgrund seines Designs einige Einschränkungen auf:

• Größe und Seitenverhältnis: Beim Ändern der Größe wird mave-player immer versuchen, das ursprünglich definierte Seitenverhältnis beizubehalten.

• Anpassungsoptionen: Für weitere Anpassungen, z. B. um das Verhalten des Players eher wie ein UI-Element zu gestalten, sollten Sie stattdessen die Verwendung von <mave-clip /> in Betracht ziehen.

• Design- und CSS-Variablen: Verwenden Sie die verfügbaren Attribute, benutzerdefinierten CSS-Eigenschaften und Designoptionen, um das Erscheinungsbild anzupassen, ohne die Kernstile zu überschreiben.