Plyr：CSS风格的视频播放器

我最近发现了Sam Potts的JavaScript库Plyr，用于创建可自定义的视频播放器。它的出色功能？无缝集成YouTube视频的能力，有效地使您可以使用CSS嵌入YouTube。

对于HTML5音频和视频，只需定位相关元素并初始化库即可。使用YouTube，您需要包装本机嵌入代码：

<div id="player">
  <iframe ... src=""></iframe>
</div>

<script>
const player = new Plyr("#player");
</script>

包含Plyr CSS文件之后，您就可以使用了。 CSS利用自定义属性，通过单个声明实现简单的主题更改，例如：

 html {
  -plyr-color-main：＃f18f35;
}

许多自定义属性允许广泛的样式。可以在[链接到codepen示例 - 替换为实际链接的链接中找到一个工作示例]。

提供的HTML/CSS还确保基于纵横比的响应式视频缩放。

以上是Plyr：CSS风格的视频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！