Responsive HTML5 Video Player on Youtube

Cara Menginstall / Memasang Html5 Video Player From Youtube

Letakan plyr.css di bagian atas </head>, dengan Copy Paste Code Berikut :

CSS<link href='https://cdn.plyr.io/3.4.3/plyr.css' rel='stylesheet'/>

Letakan plyr.js di atas </body>, dan menginisialisasi Plyr (), dengan Copy Paste Code Berikut:

JS<script src="https://cdn.plyr.io/3.4.3/plyr.js"></script>

Letakan JQuery di atas </body>, dengan Copy Paste Code Berikut :

Jquery<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

---

Plyr juga berfungsi sebagai pengganti kode untuk memasukkan video YouTube. Yang penting adalah mendapatkan id dari video, yang setelahnya ?v=, misalnya, kita akan mengambil kode dari tautan berikut :

https://www.youtube.com/watch?v=fmI_Ndrxy14

id link video youtube di atas adalah fmI_Ndrxy14 , kemudian salin dan terapkan di tag html di bawah ini :

HTML<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="fmI_Ndrxy14"></div>