Thumbnail Error Pada Embedded Link Youtube

Masalah thumbnail error pada video YouTube yang disematkan di Blogger ternyata cukup sering terjadi, terutama saat tampilan dibuka di perangkat mobile. Awalnya video bisa berjalan normal, tetapi setelah beberapa waktu dan halaman di-refresh, thumbnail menjadi rusak atau video tidak dapat diputar di smartphone.

Penulis sempat mencoba berbagai cara, mulai dari mengganti thumbnail hingga mencari tutorial di banyak website. Namun hasilnya masih sama. Video hanya bisa diputar di desktop, sedangkan di HP hanya muncul gambar thumbnail tanpa video berjalan.

Akhirnya solusi ditemukan dengan bantuan AI seperti ChatGPT. Dengan memberikan pertanyaan sederhana namun jelas mengenai masalah yang terjadi, AI dapat memahami kendala dan memberikan script HTML yang lebih sesuai untuk Blogger.

Play Video Desktop and Mobile Version

HTML Code

<div class="video-container" onclick="playVideo(this)">
  
  <img
    src="https://img.youtube.com/vi/stu1O7FN8wg/hqdefault.jpg"
    alt="YouTube Thumbnail"
  />

  <div class="play-button">▶</div>

</div>

<script>
function playVideo(element){
  element.innerHTML =
    '<iframe src="https://www.youtube.com/embed/stu1O7FN8wg?autoplay=1" ' +
    'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ' +
    'allowfullscreen frameborder="0"></iframe>';
}
</script>

<style>
.video-container{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  cursor:pointer;
  background:#000;
}

.video-container img,
.video-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.play-button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:60px;
  color:white;
  z-index:2;
  text-shadow:0 0 10px rgba(0,0,0,.8);
}
</style>

Script tersebut menggunakan thumbnail YouTube sebagai tampilan awal, lalu otomatis mengganti thumbnail menjadi iframe video saat tombol play ditekan. Cara ini membuat video lebih stabil dan bisa diputar dengan baik di desktop maupun mobile.

Selain memperbaiki masalah thumbnail error, metode ini juga membuat tampilan embed video menjadi lebih responsif dan ringan saat halaman pertama kali dibuka.

Play Video Desktop but Mobile Version only Thumbnail

HTML Code

<div class="video-container">

  <!-- Thumbnail -->
  <img 
    class="video-thumb"
    src="https://img.youtube.com/vi/EiXJuq6zfXg/hqdefault.jpg"
    alt="Thumbnail Video YouTube"
  />

  <!-- YouTube Video -->
  <iframe
    src="https://www.youtube.com/embed/EiXJuq6zfXg"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>

</div>

<style>
.video-container{
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container .video-thumb{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-container .video-thumb{
  object-fit: cover;
  z-index: 1;
}

.video-container iframe{
  z-index: 2;
}
</style>

Dari pengalaman tersebut terlihat bahwa AI dapat membantu mencari solusi teknis dengan lebih cepat, asalkan perintah atau prompt yang diberikan cukup jelas dan detail. AI bukan hanya untuk menjawab pertanyaan biasa, tetapi juga bisa membantu menyelesaikan masalah coding, desain website, hingga kebutuhan digital lainnya.

Perkembangan AI saat ini juga membuka banyak peluang baru untuk belajar dan meningkatkan kemampuan di bidang teknologi. Dengan memanfaatkan AI sebagai alat bantu, proses belajar menjadi lebih mudah dan efisien.