Cara Memasang Video Youtube Responsive Di Postingan Blogspot

Youtube Responsive
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.
Share on Google Plus

About DEYUAN COM

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 komentar: