Blogger, Playlist, Tutorial, Youtube

Embedded Iframe Playlist Youtube Dimulai Pada Video Random di Blogger

Tulisan ini mendokumentasikan script Embedded Iframe Playlist Youtube Mulai Pada Video Random di Blogger. Script ini diperlukan karena embedded iframe Youtube selalu menampilkan video dari mulai yang terbaru. Hal ini tentu saja tak menguntungkan bagi Youtuber yang memasang playlist-nya di blog, dan menjengkelkan bagi pengunjung karena akan selalu melihat video yang sama.

Dalam tulisan sebelumnya telah disebutkan bagaimana caranya agar Embedded Iframe Playlist Youtube Mulai Pada Video Tertentu, yang dilakukan secara manual dengan memasukkan angka urut video yang ada di dalam playlist. Cara ini baik, karena bisa dikombinasikan dengan defer parsing video dan responsive 100% width.

Cara manual juga membuat Anda bisa merubah thumbnail playlist Youtube, untuk disesuaikan dengan thumbnail video yang sedang dipromosikan. Kelemahannya tentu saja agak merepotkan dan memakan waktu. Jika untuk WordPress ada cara untuk mendapatkan random video, yang telah disebutkan pada cara manual di atas, maka tidak demikian dengan Blogger.

Kecepatan loading laman merupakan salah satu faktor terpenting yang harus dipertimbangkan oleh pengelola blog apakah hendak menampilkan video Youtube di tulisan, atau lebih baik memberikan taut ke video yang ada di Youtube. Cara yang kedua tentu lebih meringankan halaman, namun memang secara visual tidak menarik.

Script yang saya kutip di bawah ini tidak menggunakan defer loading dan tidak responsive 100%, sehingga Anda harus mempertimbangkan benar dimana script itu sebaiknya dipasang. Saran saya, sebagaimana yang saya lakukan ketika tulisan ini dibuat, adalah hanya memasang script pada desktop dan hanya di halaman index serta label, tidak pada post dan page, dan tidak pada mobile.

Alasannya tentu saja agar loading speed pada post dan page tidak memburuk secara tajam oleh karena dipasang video Youtube yang script-nya tidak di-defer loading. Homepage dan Label bisa dipertimbangkan untuk dipasang video karena jarang orang datang langsung ke sana lewat search engine.

Untuk memasang script embedded iframe playlist Youtube mulai pada Video random di Blogger, lakukan langkah di bawah ini. Namun sebelum itu, karena Anda hanya akan memasang satu playlist di halaman muka, Anda perlu membaca tulisan Memasang Google Adsense di Bawah Judul Posts di Homepage Blogger Blogspot, dan melakukan perubahan sesuai yang tertulis di sana, meski tidak untuk memasang AdSense.

  1. Login ke Blogger -> Theme --> Edit HTML
  2. Cari <b:if cond='data:post.title'>, yang mestinya ada dua. Pertama untuk judul di mobile dan yang kedua untuk desktop. Pilih yang untuk desktop.
  3. Salin script di bawah ini, dan letakkan di bawah kode di atas:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:x==0'><script type='text/javascript'>
    //<![CDATA[
    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', {
    width: '660',
    height: '370',
    events: {
    'onReady': onPlayerReady
    },
    playerVars: {
    listType: 'playlist',
    list: 'PL1EB10B19837A1B61'
    }
    });
    }
    function onPlayerReady(event) {
    num = Math.floor(Math.random() * 100);
    setTimeout(() => {
    player.playVideoAt(num);
    }, 1000);
    } //]]> </script>
    <div id="player"></div></b:if>/b:if>
  4. Ubah angka pada width sesuai dengan lebar laman Anda, dan ubah height mengikuti perbandingan dengan lebarnya.
  5. Ganti id playlist dengan id playlist video Anda.
  6. Ubah angka 100 dengan jumlah video pada playlist Anda. Jika jumlah video di playlist 100, maka gunakan angka 101, karena Youtube playlist dimulai dari angka 0.
  7. Save, dan lihat hasilnya

Jika semuanya berjalan dengan baik, maka video akan diputar secara otomatis dimulai pada urutan yang acak setiap kali laman dibuka. Kredit diberikan kepada yang pertama kali membuat script.


Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Juni 27, 2018.