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中文網其他相關文章！