Cara Memasang Video Youtube Responsive di Blog

Seleksi Otomatis pada Pre dan Tag Blockquote di Blogger
Membuat Tombol Demo & Download dengan Efek Slide
Mengatur Robots.txt dan Tag Tajuk Robot Blogger

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.

Cara Memasang Video Youtube Responsive di Blog

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.

Cara Memasang Video Youtube Responsive di Blog1

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 1366×768 dan menyesuaikan video embed dari youtube ke blog dengan lebar halaman postingan anda, maka tidak akan bagus dilihat bagi pengunjung yang menggukan monitor berukuran 1024×768 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

Cara Memasang Video Youtube Responsive di Blog2

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

COMMENTS

WORDPRESS: 4
  • comment-avatar

    Makasih nih atas tutorialnya gan

  • comment-avatar

    wah boleh di coba ini gan hehehe

  • comment-avatar

    kalo saya tinggal pasang aja embednya mas sudah responsive sendiri mungkin udah terpasang kali ya di template yang saya pake

  • comment-avatar

    kudu di coba mas biar ketahuan kerennya