Cara Terbaru Memasang Video Youtube Responsive Pada Blogger

Blogger | Cara Ubay - Youtube adalah salah satu situs yang paling populer, dimana sobat dapat mengupload video sobat, menonton video dan sobat juga bisa mendapatkan penghasilan dengan mendaftarkan akun adsesnse melalui youtube.

Situs youtube memiliki banyak kelebihan, diantaranya fitur embed video, yang dapat dipasang pada blogger agar dapat ditonton langsun melalui blogger tanpa mengunjungi situs youtube, namun dengan menambahkan video pada blogger akan mengurangi nilai SEO sebuah blog, dikarenakan adanya elemen iframe dan tampilannyapun belum responsive jika ukuran layar diperkecil.

Untuk itu maka cara ubay akan memberikan caranya agar video youtube yang dipasang pada blogger sobat menjadi responsive dan tidak mngurangi nilai SEO blog sobat, caranya sebagai berikut :

1. Buka Blogger >> Template >> Edit HTML >> Tambahkan kode dibawah ini sebelum ]]</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}

2. Tambahkan kode dibawah ini sebelum </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> 

3. Simpan Template
4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode dibawah ini

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

CONTOH LINK EMBED YOUTUBE YANG DIAMBIL UNTUK DIPASANG

Salin link embed seperti screenshoot diatas, kemudian simpan di dalam kode HTML diatas, seperti dibawah ini :

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


 5. Terakhir SIMPAN atau PUBLIKASIKAN postingan sobat.

Nah, sekarang video youtube yang telah di embed pada postingan sudah responsive, sehingga dapat menyesuaikan dengan layar ukuran apapun.

Salam Blogger,

Sukses untuk semua, terima kasih telah berkunjung pada Artikel Cara Terbaru Memasang Video Youtube Responsive Pada Blogger, Semoga bermanfaat dan sesuai dengan kata kunci pencarian sobat.