Membuat Video Player Youtube Custom dengan Plyr.io

Di tutorial kali ini, kita akan membahas cara membuat video player Youtube custom menggunakan **Plyr.io,** sebuah library ringan dan responsif yang mendukung berbagai jenis media seperti Youtube, Vimeo, HTML5 Video. Kita juga akan mengkombinasikannya dengan Tailwind CSS untuk tampilan yang modern dan fleksibel di berbagai ukuran layar.

Tujuan

Preview

Kita akan slicing section Youtube player dengan :

  • Tampilan responsif dan rounded
  • Tombol play tengah custom (menggunakan ikon SVG sendiri)
  • Poster video custom
  • Kontrol terbatas : Play, Progres, Mute, Fullscreen

Struktur HTML

<div class="max-w-[321.61px] h-[227.9px] md:max-w-[522px] md:h-[369.9px] lg:max-w-[635.04px] lg:h-[450px] relative flex items-center justify-center">
	<div id="Video" class="flex w-[321.61px] h-[227.9px] md:w-[522px] md:h-[369.9px] lg:w-[635.04px] lg:h-[450px] object-cover shrink-0 rounded-[20.26px] md:rounded-[32.88px] lg:rounded-[40px] overflow-hidden">
		<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
	</div>
</div>
  • Container bersifat responsif menyesuaikan ukuran layar.
  • Elemen dengan id="player" adalah target untuk player Youtube dari Plyr
  • Kamu bisa mengganti data-plyr-embed-id dengan ID video Youtube yang lain.

Inisialisasi Plyr di JavaScript

Buat file videoPlay.js dan isi dengan :

const player = new Plyr("#player", {
		controls: ["progress", "mute", "fullscreen", "play-large"],
});

Ini mengatur kontrol yang ditampilkan : Progres bar, Tombol Mute, Fullscreen dan tombol play di tengah.

Styling Custom dengan CSS

Tambahkan CSS berikut agar tampilan lebih elegan dan sesuai dengan branding :

/* Tombol play tengah */
.plyr__control--overlaid {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
}
.plyr__control--overlaid::before {
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		background-image: url("assets/images/icons/play-button.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}
@media (min-width: 834px) {
		.plyr__control--overlaid::before {
		width: 70px;
		height: 70px;
		}
}
/* Sembunyikan icon default */
.plyr button[data-plyr="play"] svg {
		display: none;
}

/* Hapus efek hover mute & fullscreen */
.plyr__controls button[data-plyr="mute"]:hover,
.plyr__controls button[data-plyr="fullscreen"]:hover {
		background: transparent !important;
		box-shadow: none !important;
		filter: none !important;
}

/* Ganti poster video */
.plyr__poster {
		background-image: url("assets/images/thumbnails/thumbnail-video.png") !important;
		background-size: cover !important;
		background-position: center;
}
  • Menghilangkan background, border, dan bayangan dari tombol play bawaan yang muncul di tengah video saat belum diputar.
  • Menambahkan ikon play custom di tengah video sebagai ::before dari tombol.
  • Gambar ikon diambil dari assets/images/icons/play-button.svg.
  • Ukuran ikon play jadi lebih besar di layar yang lebih lebar (desktop/tablet).
  • Menyembunyikan ikon SVG play default dari Plyr biar nggak tumpang tindih sama ikon custom.
  • Menghapus efek hover pada tombol mute dan fullscreen
  • Mengganti poster video (gambar thumbnail sebelum play) dengan gambar custom.
  • Gambar diambil dari assets/images/thumbnails/thumbnail-video.png.
  • Gambar diset untuk cover penuh area video dan posisi tengah.

Sertakan Library Plyr

Letakkan di <head> dan sebelum penutup </body> HTML :

<-- Di tag Head -->
<link rel="stylesheet" href="<https://cdn.plyr.io/3.7.8/plyr.css>" />

<-- Sebelum Penutup -->
<script src="<https://cdn.plyr.io/3.7.8/plyr.js>"></script>
<script src="js/videoPlay.js"></script>

Penutup

Kalau kamu ingin membuat pemutar video YouTube yang lebih menarik dan enak dipakai di website-mu, Plyr.io adalah pilihan yang tepat. Caranya mudah, fiturnya lengkap, dan hasilnya lebih profesional daripada pemutar YouTube biasa.