BangSiagian.id - YouTube adalah situs berbagi video yang paling populer saat ini, yang dimana kita dapat mengunggah video, menonton video, atau bisa juga untuk menghasilkan pendapatan dari akun youtube adsense dengan mendaftar melalui youtube.

Banyak kelebihan yang ditawarkan oleh situs youtube ini, salah satunya adalah fitur embed video yang dapat ditambahkan dan dapat dilihat langsung di blog.

Pada artikel ini saya akan memberikan cara membuat video youtube responsive di blog dan cara tidaklah susah.

Jika kamu tertarik dengan tips ini, kamu bisa langsung memperaktekkan penerapannya di blog milik kamu.

Cara Mudah Membuat Video Youtube Responsive di Blog

1. Login ke Blogger
2. Klik menu Tema
3. Klik Edit HTML

4. Cari kode ini ]]></b:skin> lalu letakkan kode dibawah ini tempat diatas 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}

5. Letakkan kode dibawah ini tempat diatas </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;

<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>

6. Simpan Tema

7. Selanjutnya tambahkan kode widget video youtube responsif dibawah ini, misalnya di sidebar atau postingan blog

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

Kode link video youtube Google AdSense
https://www.youtube.com/watch?v=YSqOvgfbPhI

Perhatikan kode yang saya berikan tanda block warna merah pada kode diatas.

Untuk kode video youtube responsive di blog ini kamu dapat menerapkannya di sidebar blog atau di postingan blog, sesuaikan dengan keinginan kamu.

Share This