Hai! Berikut ini adalah Cara agar Embed Video Youtube menjadi Responsive pada Blogger, tampil dengan baik pada Tampilan Dekstop maupun Mobile.
- Buka Menu Themes, kemudian klik Edit HTML.
- Tambahkan Kode ini sebelum Kode </b:skin>
- Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.
/* built2bless-responsive-youtube */
.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}
- Kemudian Tambahkan Kode ini diatas Kode </body> :
<script type='text/javascript'>
//<![CDATA[
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>
- dan Gunakan Kode ini untuk Menampilkan Video Youtube :
<!-- built2bless-responsive-youtube --><div class='videoyoutube'><div class='video-responsive'><div class='video-youtube loader' data-src='//www.youtube.com/embed/kode video youtube?rel=0'/></div></div></div>
- Ganti Bagian Kode Video Youtube dengan bagian belakang pada URL / Link Video Youtube.
- Contoh URL / Link Video Youtube adalah https://www.youtube.com/watch?v=DHj7ejbL9cg maka cukup Ganti Bagian Kode Video Youtube dengan DHj7ejbL9c
- Kemudian klik Save Themes. dan klik View Blog untuk melihat Hasil, coba juga cek pada Tampilan Mobile.
Semoga Bermanfaat, Happy Blogging :)