Cara Menampilkan Video Cahnnel Youtube Secara Acak/Random di Blog Dengan Kode HTML

by Editor Admin August 24, 2023 Post a Comment

Assalamu'alaikum Wr Wb

Cara Menampilkan Video Cahnnel Youtube Secara Acak/Random di Blog Dengan Kode HTML

Bagi anda yang memiliki channel youtube dan ingin menampilkannya di blog anda, saya akan memberikan tutorial bagaimana caranya kita menampilkan video secara acak atau random di blog atau website kita. Untuk contohnya bisa anda lihat saja di blog ini, dibagian sidebar terdapat video yang saya tampilkan dari channel youtube saya.

Caranya sangat mudah, kita hanya memanfaatkan javascript untuk melakukan itu, Berikut ini langkah-langkahnya.
Langkah-langkahnya yaitu :
1. Klik Tambahkan Gadget
2. Pilih HTML/JavaScript
3. Pastekan script berikut ini

<!doctype html>
    <script>
        var videos = ["https://www.youtube.com/embed/bMAgmYDR2H0
", "https://www.youtube.com/embed/bMAgmYDR2H0
","https://www.youtube.com/embed/bMAgmYDR2H0
","https://www.youtube.com/embed/bMAgmYDR2H0
"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var player = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '100%');
            player.setAttribute('height', '200');
            player.setAttribute('src', randomVideoUrl);
            playerDiv.appendChild(player);
        };
    </script>
    <div id="random_player" />
</div>
</!doctype>

4. Ganti tulisan warna biru dengan alamat video di channel youtube anda, cara mendapatkan alamatnya baca disini.
5. bila anda ingin menampilkan acak dengan video yang lebih banyak maka anda tinggal menambahkan saja alamatnya dengan menambahkan  ,"alamat video" meneruskan alamat yang saya beri warna biru diatas
6. Selesai.
Semoga bermanfaat, jangan lupa klik subscribe di channel youtube saya agar anda selalu update info bermanfaat dari saya. Terimakasih.

Wa'alaikumsalam Wr Wb

Join Telegram https://t.me/opm_madrasah