Cara Memasang Video Youtube Responsive di Blog

Youtube disingkat yutup oleh mereka yang tinggal di wkwkwk land. Kita tau bahwa youtube ini adalah situs penampung video-video dari seluruh dunia yang diciptakan oleh google.

Banyak macam-macam video yang bisa anda dapatkan pada situs youtube ini seperti tutorial membuat masakan, eksperiment menghancurkan laptop, review smartphone, short film, dan juga video-video lucu.

Artikel ini bukan untuk membahas tentang youtube lebih mendalam, namun akan membahas fitur embed yang ada pada youtube. Embed pada youtube ini menggunakan bahasa markah yaitu HTML yang bisa anda terapkan pada blog anda.

Youtube di sini telah menyediakan kode embed bagi siapa saja yang ingin memasangnya pada blog mereka. Secara default nya lebar yang akan ditampilkan pada blog anda yaitu 560 sedangkan tingginya 315.

Anda dapat mengedit angka tersebut sesuai keinginan anda dengan menyesuaikan pada ukuran blog anda, akan tetapi kode yang diberikan youtube ini masih belum responsive pada blog anda.

Jika layar atau monitor tempat anda ngeblog dengan ukuran 1366x768 dan menyesuaikan video embed dari youtube ke blog dengan lebar halaman postingan anda, maka tidak akan bagus dilihat bagi pengunjung yang menggukan monitor berukuran 1024x768 karena video pada blog anda dapat terpotong sebagian ketika dilihat pengunjung tersebut.

Selanjutnya saya akan bagikan cara memasang embed video youtube ke blog yang akan membuat video embed dari youtube ini menjadi responsive meskipun layar diperkecil, karena video embednya akan menyesuaikan ukuran pada halaman postingan blogger.

Cara Memasang Video Youtube Responsive di Blog

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Youtube Responsive */
.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}

4. Tambahkan kode JS di bawah ini sebelum tag </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>

5. Simpan template

6. Gunakan kode di bawah ini pada mode HTML di postingan blog anda

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

7. Selesai

Ganti kode embed di atas dengan kode embed video youtube yang akan anda tampilkan

Contoh kode embed yang diganti

Sampai sini selesai sudah misi anda untuk membuat video youtube menjadi responsive pada blog.