Script Untuk Membuat Video Embed Youtube Menjadi Responsif Otomatis

Ketika kita mengambil video dari Youtube dan memasangnya di blog (embed) ada satu kekurangan yang cukup menyebalkan, yaitu ukuran bingkai iframe video tidak mengikuti ukuran layar alias tidak responsif. Padahal kini ini pengunjung blog tidak hanya tiba dari komputer saja, tapi dari handphone pun banyak.

Seperti inilah perbedaan tampilan video embed Youtube jikalau blog dibuka dari komputer dan handphone.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Ketika dibuka dari perangkat yang lebih kecil, iframe Youtube terlalu besar dan keluar dari garis pembatas postingan. Jelek banget kan? Saya punya satu script yang dapat menjadi solusi dari persoalan tersebut.

Memasang Youtube Responsive iFrame Video Embed Script

Saya pernah pakai script usang yang mengharuskan mengubah arahan penulisan embed. Nantinya video diambil dengan markup data-src. Tapi ribet ya mesti ganti-ganti arahan embed resmi Youtube segala.

Dengan script terbaru ini tidak perlu lagi mengubah penulisan arahan embed. Makara jauh lebih praktis. Simpan kodenya "SEBELUM / DI ATAS" </body>.

<script> //<![CDATA[ /* Youtube Responsive by igniel.com */ var youtube = $('iframe[src*="youtube.com"]'); youtube.each(function() {   $(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%'); }); $(window).resize(function() {   youtube.each(function() {     $(this).attr('height', $(this).width() * $(this).attr('aspectRatio'));   }); }).resize(); //]]> </script>

Penulisan Kode Embed Video Youtube

Seperti yang sudah disebutkan di atas, penulisan arahan embed untuk memasukkan video Youtube ke dalam postingan dilakukan dengan cara normal dan tidak ada yang perlu diganti. Cukup ambil arahan embednya dan tulis ibarat biasa.

Cara Insert Video Youtube Agar Responsive

Maka nanti hasil alhasil akan ibarat ini jikalau video Youtube dibuka dari smartphone atau perangkat lain yang ukuran layarnya lebih kecil.

Cara Pasang Video Youtube di Blog Agar Full Responsive


Ini tampilan pribadi videonya. Kalau kau sedang buka blog ini dari hp, dapat dilihat sendiri ukuran iframe video mengikuti ukuran layar, bukan?



Sekarang video Youtube kau sudah bermetamorfosis full responsif alasannya ialah nilai lebar dan tingginya otomatis berubah berkat script di atas. Dia akan menyesuaikan dengan ukuran layar yang sedang dipakai. Selamat mencoba dan biar sukses!
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours