PLYR: Pemain video CSS yang bergaya

Saya baru -baru ini menemui Plyr, perpustakaan JavaScript oleh Sam Potts untuk membuat pemain video yang disesuaikan. Ciri -ciri yang menonjol? Keupayaan untuk mengintegrasikan video YouTube dengan lancar, dengan berkesan membolehkan anda gaya YouTube embeds dengan CSS.

Untuk audio dan video HTML5, hanya menargetkan unsur -unsur yang berkaitan dan memulakan perpustakaan. Dengan YouTube, anda perlu membungkus kod embed asli:

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

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

Selepas memasukkan fail PLYR CSS, anda sudah bersedia untuk pergi. CSS menggunakan sifat tersuai, membolehkan perubahan tema mudah dengan perisytiharan tunggal, seperti:

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

Banyak sifat tersuai membolehkan gaya yang luas. Contoh kerja boleh didapati di [pautan ke contoh codepen - ganti dengan pautan sebenar jika tersedia].

HTML/CSS yang disediakan juga memastikan skala video responsif berdasarkan nisbah aspek.

Atas ialah kandungan terperinci PLYR: Pemain video CSS yang bergaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!