Memasukan video youtube ke dalam postingan blog dengan responsive - Jeep & Adventure

Selasa, 07 November 2017

Memasukan video youtube ke dalam postingan blog dengan responsive


Bagi Anda yang ingin memsukkan video youtube pada postingan blog tentunya mudah sekali caranya. namun kalau video tersebut tidak kita setting secara responsive  maka akan menyebabkan tampilan berantakan pada device yang lebih kecil seperti smartphone, tablet dll. untuk itu anda perlu masukkan kode berikut pada template blog anda :



  • Masukan kode berikut diatas kode ]]></b:skin>

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

  • Masukan kode berikut diatas 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> 

  • Langkah terakhir masukan kode berikut dalam postingan anda
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/ganti kode ini sesuai kode embed video anda">
</div>
</div>
</div>

Jika anda menyukai artikel ini silahkan share, like dan jangan lupa Subscribe youtube channel kami dibawah ini.
Jangan lupa klik like , Share & Subscribe dibawah ya....

Tidak ada komentar:

Posting Komentar