Plyr：可自定义样式的视频播放器

我偶然发现了 Sam Potts 的 Plyr，这是一个用于自定义样式视频播放器的 JavaScript 库。 令我印象深刻的是，**您可以将 YouTube** 视频列为源，因此从本质上讲，您可以拥有一个 CSS 样式的 YouTube 视频。 酷。

对于 HTML5 视频和音频，您可以直接定位这些元素并调用库。 对于 YouTube，您可以像这样包装原生嵌入...

<div class="plyr__video-embed" id="player">
  <!-- copy/paste from YouTube -->
  <iframe src="" ... ></iframe>
<div>

const player = new Plyr("#player");

现在，只要您加载 CSS 文件，就可以开始了。 CSS 使用 CSS 自定义属性编写，因此您可以编写单个声明来设置颜色主题，例如...

html {
  --plyr-color-main: #f18f35;
}

有 大量自定义属性 可以调整。 我将在下面放一个 CodePen 示例

HTML/CSS 中内置了根据纵横比使视频响应式的设置。 👍