Cara Gampang Pasang Video Youtube Responsive Di Blog

Selasa, 18 Februari 2014

Tutorial yang akan aku bahas kali ini yaitu Cara Praktis Pasang Video Youtube Responsive di Blog, yang sering menciptakan kita kewalahan sebab para pengunjung blog tidak dapat menikmati video yang kita posting melalui Smartphone miliknya.

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



Ukuran yang sudah kau tentukan tadi mungkin terlihat nyaman ketika kau buka pada sebuah komputer, tapi disaat kau atau pengunjung blog membuka postingan kau 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 dipakai oleh para pengunjung, maka kau dapat mengikuti langkah-langkahnya dibawah ini.

Pertama-tama, silahkan kau login terlebih dulu kedalam blog kamu. kemudian buka sajian Tampilan dan pilih tab Edit HTML.

Baca juga: Membuat Halaman Daftar Isi Responsive

Salinlah Kode CSS dibawah ini semoga frame video youtube yang akan kau 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 aba-aba CSS tersebut tepat sebelum aba-aba ]]></b:skin> atau sebelum aba-aba </style>.

Lalu Salinlah aba-aba Jquery dibawah ini tepat diatas aba-aba </body>, kemudian 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 semoga tampil responsive di blog, kau dapat gunakan aba-aba 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 yaitu pola Sample Video dari Youtube yang sudah aku praktekkan dari tutorial diatas.

Demikianlah tutorial Cara Praktis Pasang Video Youtube Responsive di Blog yang dapat kau praktekkan. Semoga artikel kali ini dapat bermanfaat untuk teman-teman.

Share This :