Ich bin gerade auf Plyr von Sam Potts gestoßen, eine JavaScript-Bibliothek für gestylte Video-Player. Was mir daran aufgefallen ist, ist, dass man YouTube-Videos als Quelle auflisten kann, so dass man im Wesentlichen ein CSS-gestyltes YouTube-Video haben kann. Cool.
Für HTML5-Video und -Audio können Sie diese Elemente direkt ansprechen und die Bibliothek aufrufen. Für YouTube umschließen Sie das native Einbettungsfenster wie folgt…
<div class="plyr__video-embed" id="player">
<!-- copy/paste from YouTube -->
<iframe src="" ... ></iframe>
<div>const player = new Plyr("#player");Jetzt sind Sie einsatzbereit, solange Sie die CSS-Datei laden. Das CSS wurde mit CSS-Custom-Properties geschrieben, so dass Sie eine einzige Deklaration schreiben können, um das Farbthema festzulegen, wie zum Beispiel…
html {
--plyr-color-main: #f18f35;
}Es gibt unzählige Custom-Properties zum Ausprobieren. Ich füge hier ein Pen-Beispiel ein
In HTML/CSS ist das Setup integriert, um die Videos auch nach Seitenverhältnis responsiv zu machen. 👍
Plyr ist großartig! Ich benutze es seit Jahren auf fast jedem Projekt und es tut seine Arbeit einwandfrei :)
Es ist ziemlich leichtgewichtig und anpassbar und unterstützt auch Vimeo.
Hallo. Toller Artikel. Gut gemacht. Ich genieße ihn wirklich, aber ich habe ein kleines Problem. Könnten Sie mir bitte helfen, wie ich das JavaScript und HTML für diesen Plyr reparieren kann, damit er für mehrere Player verwendet werden kann?
Wie mache ich die Plyr-Fortschrittsleiste über die gesamte Breite? So dass die Player-Fortschrittsleiste über die gesamte Breite geht und darunter alle Steuerelemente sind.
Wenn das Video pausiert, möchte ich nicht mehr, dass der große Play-Button erscheint. Wie kann das erreicht werden?