CARA MEMASANG VIDEO YOUTUBE RESPONSIVE DI BLOGGER


ONEPOIN.COM - Baiklah sobat langsung ke intinya saja disini saya akan membahas sedikit tutorial yaitu bagaimana cara memasang video youtube responsive di blogger ? bagi sobat yang belum tahu bisa mengikuti langkah-langkahnya di bawah ini :

  • Masuk ke akun blogger sobat masing-masing
  • Klik Menu Template ==> Edit Template ==> Letakkan kode di bawah ini di atas kode ]]></b:skin>


/* 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}

  • Setelah itu tambahkan kode di bawah ini di atas kode </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>

  • Setelah itu simpan template 
  • Selanjutnya untuk menambahkan video youtube responsive di dalam postingan, gunakan kode di bawah 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 DARI VIDEO YOUTUBE YANG AKAN DI AMBIL :


  • Salin Link Embed seperti gambar di atas setelah itu simpan di dalam kode HTML di atas yang akan di gunakan untuk membuat video responsive di dalam postingan dan nanti hasilnya akan menjadi seperti kode di bawah ini :

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

  • Setelah itu Klik Publikasikan postingan dan lihat hasilnya
  • Selesai mudah bukan.

HASILNYA AKAN MENJADI SEPERTI VIDEO YOUTUBE DI BAWAH INI


    Subscribe to receive free email updates:

    0 Response to "CARA MEMASANG VIDEO YOUTUBE RESPONSIVE DI BLOGGER"

    Post a Comment