Menghilangkan Youtube Logo di Video Embed Youtube dengan Javascript dan Css 2023
Mungkin ada yang terganggu dengan Youtube logo jika ingin menaruh Youtube video di website dengan fitur video embed nya. Jangan khawatir, itu bisa terselesaikan dengan tetap membaca artikel ini sampai selesai. hehe
Youtube menjadi salah satunya streaming video terbesar di dunia dengan kunjungan jutaan setiap harinya. Dengan jutaan pengunjung setiap hari nya, performa streaming video Youtube tidak di ragukan lagi. Maka patut di pertimbangkan fitur video embed dari youtube berada di website anda untuk portfolio atau dll.
Bagaimana jika anda merasa terganggu terdapat logo di youtube video embed di video yang ada di website anda? tenang… berikut cara menghilangkan logo Youtube di video embed.
Cara ini tidak hanya akan menghilangkan logo Youtube saja tapi juga rekomendasi video lain jika saat anda pause atau video telah selesai di Youtube embed dan progress bar.
Install Youtube Iframe API
Pertama-tama copy dan paste kode di bawah dan taruh di dalam <head> di website anda atau bisa di taruh di dalam <body> di paling bawah.
<script src="https://www.youtube.com/iframe_api"/>HTML dan Konfigurasi Youtube Iframe API
Copy dan paste kode html dibawah taruh di dalam <body>
<div id="wrapper">
<div id="player">
<div id="player-item"></div>
</div>
</div>
<button id="button-play">Play</button> // play button
<button id="button-pause">Pause</button> // pause buttonSetelah itu, konfigurasi Youtube Iframe Api seperti berikut:
let player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '1090', // tinggi video
width: '640', // panjang video
videoId: 'PnXgGi8CWI0', // id youtube video
playerVars: {
playsinline: 1,
enablejsapi: 1,
start: 0,
disablekb: 0
},
events: {
onReady: onPlayerReady
}
})
}Buat function onPlayerReady seperti kode di bawah:
function onPlayerReady(event) {
event.target.playVideo()
}Disini saya hanya akan menjelaskan tentang events yang berada di konfigurasi Youtube Iframe Api. Jika anda ingin lebih detail tentang Youtube Iframe API bisa lihat di sini.
Maksud dari events onReady adalah jika iframe telah selesai ke load, maka akan mengeksekusi function onPlayerReady. kalau di kasus ini function onPlayerReady akan play video.
Membuat Fungsi Play dan Pause
Sebelumnya kita telah membuat button untuk play dan pause, setelah itu untuk membuat kedua button berfungsi, maka tulis kode seperti kode dibawah:
const buttonPlay = document.getElementById('button-play')
const buttonPause = document.getElementById('button-pause')
function playVideo() {
player.playVideo()
}
function pauseVideo() {
player.pauseVideo()
}
buttonPlay.addEventListener("click", playVideo)
buttonPause.addEventListener("click", pauseVideo)
Styling CSS
Resep dari tutorial ini adalah di styling css. kenapa? karena kita tidak bisa langsung merubah di Youtube Iframe API (kecuali konfigurasi yang di sediakan oleh Youtube Iframe API dan itupun terbatas, di sini saya membuat agar bisa melampui batas) . berikut kode css nya:
#player{
position: absolute;
top: -86%;
}
#wrapper{
position: relative;
height: 400px;
overflow: hidden;
}Simpel kan? coba analisa di codepen ini kalau belum ngerti. Semoga terhibur.
