Berikut adalah tutorial lengkap tentang cara menambahkan video youtube pada halaman website yang bisa diputar otomatis.
Dalam topik ini saya akan menjelaskan tentang cara menambahkan video youtube dengan fitur putar otomatis di blog atau situs Anda. Topik yang sangat keren dan menarik, sekarang mari kita mulai.
YouTube memiliki banyak keuntungan yang diberikan untuk memasang video mereka di situs Anda. Sudah kami dapatkan skrip yang disematkan dengan menggunakan iframe. Tapi, itu tidak memiliki fitur putar otomatis, Karena mereka tidak perlu menghabiskan bandwidth pengguna. Jadi, pengguna seluler tidak akan mendapatkan video yang dimuat secara otomatis.
Sudah dijelaskan dengan video tertanam di YouTube telah digunakan dengan iFrame. Langsung saja saya berikan contohnya satu;
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEOID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Kode ini akan memberikan YouTube dan iFrame berisi semua kode tetapi masih tidak diputar secara otomatis. Jadi kita hanya perlu membuatnya menjadi auto play dengan script sederhana.
Oleh karena itu Anda dapat menambahkan video di blog atau situs Anda dengan auto play dengan menggunakan javascript. Seperti yang diberikan di bawah ini juga diberikan penjelasan tentang cara melakukan perubahan.
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'xxxxx',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'showinfo': 0,
'rel': 0,
'controls': 0,
'color':'white',
'loop': 1,
'mute':1,
// 'origin': 'https://meeranblog24x7.blogspot.com/'
},
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
player.mute();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Setelah menyalin kode, Anda perlu mengubah kode warna merah xxxx menjadi ID Video Anda. misal link video kamu https://youtu.be/PTfI41qLIFk lalu potong after slash area PTfI41qLIFk ini adalah kode yang perlu kamu ubah itu adalah Video ID kamu.
Akan ada kemungkinan untuk memutar otomatis dengan 5 detik atau 10 detik. Dalam kode JavaScript ini juga akan memberikan itu pada tindakan keren. Hanya ingin membuatnya Anda mengubah nilai dalam kode. Itu saya jelaskan dengan contoh di bawah ini.
var done = false;
Ubah saja nilai dalam kode false menjadi True dan atur detik dengan contoh di bawah ini
setTimeout(stopVideo, 6000);
Dalam 6000 berarti 6 detik, Anda perlu mengubahnya menjadi 10 detik, jadi 10000 itu saja. Anda memutar otomatis Video dengan 10 detik.
Kesimpulan :- Semua tentang membuat video youtube dengan mudah dengan yang disematkan menggunakan JavaScript. Dalam metode ini bekerja dengan Sempurna, saya juga telah melampirkan video demo di bawah ini.
0 Response to "Cara Menambahkan Video YouTube di Blog/Website Autoplay (100% Berfungsi)"
Post a Comment