Cara Embed Video Youtube Autoplay Tanpa Suara

"Tips edit blog catatandroid bagaimana cara menambahkan fitur widget embed video dari youtube otomatis play tanpa suara. "

YZG 06 July 2 Comment

Dalam artikel tips blog kali ini kita akan mencoba memasang widget embed video dari Youtube yang dapat play otomatis namun tidak bersuara di Blogger.

Jika sobat familiar dengan metode embed langsung menggunakan kode yang diberikan oleh widget share Youtube bawaan, maka dalam metode kali ini sedikit berbeda.

Karena kode yang diberikan oleh Youtube hanya untuk menempel Video dengan tombol play yang harus kita tap manual untuk memutar videonya.

Cara Autoplay Embed Video Youtube Tanpa Suara di Blogger Terbaru

Fitur Autoplay Video Tanpa Suara

Jika kita sering membuka web maupun aplikasi Youtube Android terbaru, semua daftar Video yang tampil akan autoplay alias otomatis berputar namun tanpa suara bukan?

Tentunya tampilan video yang berjalan tersebut akan sangat menarik, disamping itu kita sebagai pengunjung dapat sedikit mengetahui kisi-kisi dari isi konten dalam video dengan melihat sedikit cuplikan walau tanpa suara.

Yang nantinya jika Video tersebut menarik tentunya kita tidak akan sungkan untuk membukanya atau menontonnya secara full lengkap dengan suaranya.

Jika sobat masih bingung video di sidebar blog ini adalah Demonya.

DEMO

Pasang Kode Muted Autoplay Embed YT Video

Pertama-tama cari dan buka video yang ingin di embed di blog
Copy ID Video Youtube yang dapat kita lihat pada kolom alamat url, contoh: youtube.com/watch?v=vDq7eZNgQyI
vDq7eZNgQyI adalah kode ID Video yang akan kita gunakan
Selanjutnya buka dan masuk ke akun Blogger sobat
Tentukan dimana sobat akan memasang code widget autoplay Video ini, apakan di dalam HTML Post, Layout, atau Template

Copy kode berikut dan tempelkan sesuai dengan keinginan

<div class="iframe-container">
  <div id="player"></div>
</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', {
      width: '100%',
      videoId: 'ID VIDEO YOUTUBE',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }
 function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>
<style>
/* Make the youtube video responsive */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Ganti ID VIDEO YOUTUBE dengan ID Video sobat
Save dan silahkan lihat hasilnya

Menambahkan Tombol Close Video (Optional)

Ganti kode pada langkah No.5 dengan kode dibawah ini

<div class="iframe-container">
  <div id="player"></div>
  <span id="closevidctd">
    <svg style="width:14px;height:14px" viewbox="0 0 24 24">
      <path fill="white" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />
	</path></svg>
  </span>
</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', {
      width: '100%',
      videoId: '-EASI71ZoRQ',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }
 function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  };
// tambahan tombol close by catatandroid
window.onload = function(){ 
document.getElementById('closevidctd').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; 
}; 
</script>
<style>
#closevidctd{cursor:pointer;font-size:5px;position: absolute;right: 0px;top:40%;background: rgba(1,0,1,.4);padding: 2px 2px 0 2px;border-radius: 50% 0 0 50%;z-index:9}
</style>

Penutup dan Kesimpulan

CatatanDroid telah mencoba beberapa kode autoplay embed youtube yang tersebar di halaman pencarian google.

Mayoritas memberikan kode seperti allow autoplay, ?autoplay=1, jsapi, inlineplay, dsb namun hasilnya masih nihil alias tidak berhasil.

Kode embed autoplay video YT tersebut sudah tidak bekerja lagi dikarenakan adanya update dari pihak Google.

Terima kasih kepada blog digiztal yang telah share kode dalam tutorial ini, dengan kode khusus akhirnya kita bisa memasang widget autoplay Youtube.

Cara diatas berhasil CatatanDroid terapkan di blog ini tepatnya pada widget sidebar sisi bawah yang berjudul Bantu Subscribe Ya! akhir kata semoga tips blog kali ini bermanfaat dan selamat mencoba! CatatanDroid