Cara Mudah Pasang Video Youtube Responsive di Blog

Tutorial yang akan saya bahas kali ini adalah Cara Mudah Pasang Video Youtube Responsive di Blog, yang sering membuat kita kewalahan karena para pengunjung blog tidak bisa menikmati video yang kita posting melalui Smartphone miliknya.

Disaat kita memposting sebuah video kedalam artikel blog kita, biasanya kita diingatkan untuk menentukan ukuran panjang kali lebar sebuah frame yang akan menampilkan video tersebut.

Ukuran yang sudah kamu tentukan tadi mungkin terlihat nyaman saat kamu buka pada sebuah komputer, tapi disaat kamu atau pengunjung blog membuka postingan kamu yang berisi video itu dipastikan video tidak akan tampil sempurna.

Nah untuk merubah frame video youtube tersebut menjadi responsive atau mengikuti setiap ukuran layar sesuai device yang digunakan oleh para pengunjung, maka kamu bisa mengikuti langkah-langkahnya dibawah ini.

Pertama-tama, silahkan kamu login terlebih dulu kedalam blog kamu. lalu buka menu Tampilan dan pilih tab Edit HTML.

Salinlah Kode CSS dibawah ini agar frame video youtube yang akan kamu embed nanti menjadi responsive.

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

Tempelkan kode CSS tersebut tepat sebelum kode ]]></b:skin> atau sebelum kode </style>.

Lalu Salinlah kode Jquery dibawah ini tepat diatas kode </body>, lalu simpan template.

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

Selanjutnya untuk menambahkan video youtube agar tampil responsive di blog, kamu bisa gunakan kode HTML dibawah ini

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK-EMBED-VIDEO">
</div>
</div>
</div>

contoh link embed video youtube :
https://www.youtube.com/watch?v=aTBJbfguiOs

Berikut ini adalah contoh Sample Video dari Youtube yang sudah saya praktekkan dari tutorial diatas.

Demikianlah tutorial Cara Mudah Pasang Video Youtube Responsive di Blog yang bisa kamu praktekkan. Semoga artikel kali ini bisa bermanfaat untuk teman-teman.