-->

Cara Membuat Video Youtube Responsif di Blog


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 responsif di blog dan cara tidaklah susah.

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

Cara Membuat Video Youtube Responsif di Blog


1. Login ke akun 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 yang saya berikan tanda blok warna merah pada kode diatas.

Untuk kode video youtube responsif ini kamu dapat menerapkannya di bilah sisi blog atau di postingan blog, semua sesuai dengan keinginan kamu yang ingin kamu postingkan video youtube responsif blog kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel