Cara Terbaru Memasang Video Youtube Responsive di Blogger.com

Cara memasang video responsive di blogger.com dengan tampilan responsive.

Memasang Video Youtube Responsive di bloggger.com

kali ini saya ingin coba berbagi, bagaimana cara memasang video youtube ke blog dengan gaya tampilan responsive.
Mungkin temen-temen yang sering menggunakan video dari youtube dan ingin memasangkan-nya di blog berikut caranya:

Lihat contoh video yang saya pajang di atas, cukup responsive bukan?
Oke kita mulai..

1. Langkah Pertama: masuk ke blogger=>Template=>edit HTML=>tambah 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 JQuery 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 video youtube kita ambil link embeb-nya:

Copy Link embed youtube

Salin link embebd seperti screnshoot di atas, kemudian simpan ke dalam kode HTML di atas sepeti ini:

<div class="videoyoutube">

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

5. Terakhir simpan dan publishkan postingan.

nah begitu kira-kira cara memasang video youtube responsive di blog.
semoga bermanfaat dan dapat membantu buat temen-teman yang sedang mencari artikel tentang cara memasang video responsive di blog.

Terimakasih.