Cara Memasang Video Youtube Responsive Di Postingan Blogspot

Link Instant - Sering kali kita share video dari youtube di postingan kita dan sering kali juga posisinya berantakan. Terkadang di tengah, samping kiri, samping kanan atau bahkan terlalu besar sehingga memotong screen video tersebut.

Nah, kali ini Link Instant akan berbagi cara untuk mengatasi tersebut dengan Memasang script agar video youtube menjadi responsive menyesuaikan lebar halaman posting. Begini caranya.

Buka dasbor blogger dan masuk ke menu edit HTML

Temukan kode ]]></b:skin> atau </style> dan letakkan kode di bawah ini sebelum kode tersebut.

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

 Lalu cari kode </body> dan letakkan kode di bawah ini sebelum kode tersebut.

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

Simpan Template.

Untuk menggunakannya silahkan menggunakan 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 Video

Salin Link Embednya dan tarus seperti di bawah ini

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

Dengan menggunakan script ini maka lebar video akan menyesuaikan lebar layar dimana web di buka. Semoga bermanfaat.