3 Cara Memasang Video YouTube Responsive di Blog

Masih dengan kategori Tutorial Blogger, kali ini kita akan belajar cara memasang video YouTube Responsive di blog.

Video YouTube yang akan ditambahkan di dalam artikel blog ini "bersifat" adaptif, artinya Responsive dan Mobile Friendly agar pengunjung situs yang menggunakan HP dapat menikmati video YouTube sebagaimana mestinya.

3 Cara Memasang Video YouTube Responsive di Blog

Di sini ada 3 tutorial memasang video YouTube di blog. Semuanya, Responsive! Kalian bisa menyesuaikannya sendiri, ya!

1. Video YouTube Responsive

Buka situs YouTube, temukan video, lalu ketuk tombol Share atau Bagikan. Sampai di sini, tekan tombol Embed seperti gambar di bawah ini:

Ini kodenya:

<iframe width="560" height="315" src="https://www.youtube.com/embed/AdATZ2G1k84" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Perhatikan: Ubah angka 560 menjadi 100%, angka 315 menjadi 400, dan hapus kode AutoPlay.

Nantinya, hasilnya akan seperti di bawah ini:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/AdATZ2G1k84" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Kode di atas inilah yang nantinya kalian pasang ke dalam artikel blog, tepat di bagian mode HTML - bukan Compose!

Hasilnya seperti di bawah ini:

2. Video YouTube Responsive

Cara yang kedua ini tergolong sedikit "membebankan" Template Blogger, karena ada kode CSS yang harus ditambahkan.

Pertama, agar tampilan video YouTube-nya bisa Responsive sebagaimana mestinya, tambahkan kode CSS berikut ini, di atas kode ]]></b:skin>

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}

Jika sudah, cara selanjutnya seperti ini:

Ikuti langkah-langkah tutorial No. 1 di atas sampai di bagian Embed. Sisipkan kode Embed video YouTube tersebut di tengah-tengah kode di bawah ini:

<div class="youtube-responsive-container">
<!-- Embed Video YouTube di Sini -->
</div>

Hasilnya kurang lebih seperti ini:

<div class="youtube-responsive-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/AdATZ2G1k84" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Save Template Blogger, dan silakan dipraktekan.

3. Video YouTube Responsive

Di antara semua tutorial di atas, saya lebih menyarankan tutorial No. 3 ini. Hasilnya lebih sempurna :)

Simpan kode di bawah ini, di atas kode ]]></b:skin> atau </style>

/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.videoyoutube{text-align:center;margin:auto;width:100%}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Selanjutnya, tambahkan kode di bawah ini, tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Simpan perubahan pada Template Blogger.

Selanjutnya, apabila ingin menampilkan video YouTube di postingan blog agar Mobile Friendly (Responsive), kode yang diperlukan adalah kode di bawah ini:

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/AdATZ2G1k84">
</div>
</div>
</div>

Silakan ubah Url terakhir di atas, AdATZ2G1k84 - dengan Url video YouTube yang ingin kalian tampilkan.

Sumber:

https://www.contohblog.com/2019/02/cara-pasang-video-youtube-responsive.html
https://www.arlinadzgn.com/2015/09/cara-terbaru-memasang-video-youtube-responsive-di-blog.html