Membuat Video Youtube pada Blog Menjadi Responsif di Semua Perangkat

Script Video Embed Youtube 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 sekarang ini pengunjung blog tidak hanya datang dari komputer saja, tapi dari handphone pun banyak.

Seperti inilah perbedaan tampilan video embed Youtube jika 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 bisa menjadi solusi dari masalah tersebut.

Cara Agar Video YouTube Responsif di Blog

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

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

<script> //<![CDATA[
/* Youtube Responsive by igniel.com */
window.onload = function ignielYtube() {
  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 kode embed untuk memasukkan video Youtube ke dalam postingan dilakukan dengan cara normal dan tidak ada yang perlu diganti. Cukup ambil kode embednya dan tulis seperti biasa.

Cara Insert Video Youtube Agar Responsive

Maka nanti hasil akhirnya akan seperti ini jika video Youtube dibuka dari smartphone atau perangkat lain yang ukuran layarnya lebih kecil.

Cara Pasang Video Youtube di Blog Agar Responsive

Ini tampilan langsung videonya. Kalau kamu sedang buka blog ini dari hp, bisa dilihat sendiri ukuran iframe video mengikuti ukuran layar, bukan?

Sekarang video Youtube kamu sudah berubah menjadi full responsif karena nilai lebar dan tingginya otomatis berubah berkat script di atas. Dia akan menyesuaikan dengan ukuran layar yang sedang dipakai. Selamat mencoba dan semoga sukses!

UPDATE

Sepertinya banyak sekali yang membandingkan jQuery dengan CSS. Iya, pakai CSS doang pun bisa sebenernya. Kira-kira begini kode yang ditulis oleh salah satu pengunjung di kolom komentar artikel ini. Memang bekerja kok, kamu bisa coba sendiri.

/* Youtube Responsive */
.post-body iframe {width:100%!important;}
@media screen and (max-width:960px){
  .post-body iframe {max-height:90%}
}
@media screen and (max-width:768px){
  .post-body iframe {max-height:75%}
}
@media screen and (max-width:600px){
  .post-body iframe {max-height:60%}
}
@media screen and (max-width:480px){
  .post-body iframe {height:auto!important;max-height:auto!important}
}

Lebar video memang akan mengikuti ukuran layar, tapi kekurangannya akan menyisakan ruang kosong berwarna hitam. Dan hanya akan bekerja pada video berbentuk landscape. Tidak seperti jQuery yang benar-benar menghilangkan ruang hitam tersebut.

Mana script video Youtube responsive yang mau kamu pilih? Silakan tentukan sesuai kebutuhan.

Artikel Terkait

45 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Kiki Holmes
    11 Januari, 2022
    Profil: https://www.blogger.com/profile/01910153405428570820
    Diterapkan di template igniplex, work gak mbak?
  • Ichigorider
    06 Oktober, 2021
    Profil: https://www.blogger.com/profile/15702272205663603535
    thanks banget bro
  • Dayanty
    07 September, 2021
    Profil: https://www.blogger.com/profile/08014556911010580531
    Auto Di Coba
    Makasih mbak igniel
  • Dayanty
    07 September, 2021
    Profil: https://www.blogger.com/profile/08014556911010580531
    Mbak emang keren Saya suka
  • Alief Nartama Kurniawan [@aliefnk]
    28 Juni, 2021
    Profil: https://www.blogger.com/profile/06665954851594654162
    Work!

    Ahh mantap~ Makasih infonya.
  • Anonim
    Anonim 13 Februari, 2021
    Mbak , kok Layar video saya jadi panjang seperti Mode Cinematic
    ko ga bisa kotak seperti video asli nya ya ,

    https://ratu-templates.blogspot.com/p/ratu-salsabila-madina.html
    • Seorang Manusia yang Lahir di Indonesia
      23 Februari, 2021
      Profil: https://www.blogger.com/profile/06890823464453117871
      pakai yang css saja
    • Anonim
      Anonim 28 Februari, 2021
      Work pakai ccs ,
      tapi berlaku untuk youtube aja ,
      di google drive kaga bisa
  • Jafar Maulana
    02 November, 2020
    Profil: https://www.blogger.com/profile/02787940950188364174
    Saya suka artikelnya.. Menarik.
  • Kapten Telor
    20 September, 2020
    Profil: https://www.blogger.com/profile/06530332129088698385
    Maaf mbak mintak tolong lagi...
    Jika boleh script nya yg bisa universal y mbak, g cuma fokus utk video youtube, google drive dll, tapi videonya bisa dr sumber mana saja mbak...trima kasih
    • Seorang Manusia yang Lahir di Indonesia
      23 Februari, 2021
      Profil: https://www.blogger.com/profile/06890823464453117871
      Pakai yang css saja
  • Kapten Telor
    20 September, 2020
    Profil: https://www.blogger.com/profile/06530332129088698385
    Oya template saya textrim v3, trima ksh mbak atas templatenya saya suka dan mudah digunakan utk editing coding html
  • Kapten Telor
    20 September, 2020
    Profil: https://www.blogger.com/profile/06530332129088698385
    Mbak mau nanyak...itu script jquery khusus video youtube kan mbak..
    Nah masalah saya adalah jika video diambil dari google.drive gmana mbak scriptnya, biar g menyisakan space kosong hitam..
    Mohon d bantu y mbak
  • Nurani Hongkong
    29 Agustus, 2020
    Profil: https://www.blogger.com/profile/06567598860674226770
    Mantap igniel.com
  • Nursahid
    25 Agustus, 2020
    Profil: https://www.blogger.com/profile/05733645192604690250
    MANTAP!!! Terima kasih, Gan.
  • Christopher Sugiono
    23 Juli, 2020
    Profil: https://www.blogger.com/profile/04716847271327632376
    Thanks tutorialnya. Work gan.
  • Admin
    04 Juni, 2020
    Profil: https://www.blogger.com/profile/08512786632937229502
    #ASK Supaya bisa autoplay saat ada pengunjung blog, baik dibuka dari HP maupun komputer, gimana?
  • Zatnika
    07 Desember, 2019
    Profil: https://www.blogger.com/profile/16685156825123852124
    Salam kenal Kak Igniel, website nya bagus banget, teruslah berkarya~
  • Mukesh
    02 Desember, 2019
    Profil: https://www.blogger.com/profile/14511455511622074130
    how to optimum image for blogspot?
  • Rico
    25 November, 2019
    Profil: https://www.blogger.com/profile/13626655693427922682
    wajib dicoba
  • Merman Gian
    26 Oktober, 2019
    Profil: https://www.blogger.com/profile/08060966122032459248
    Ribet banget ! ubah aja width nya menjadi 100%.
    sama seperti embed gmaps.
  • Unknown
    30 Juli, 2019
    Profil: https://www.blogger.com/profile/01203632663207709314
    hut this code is work for all cases.....

    /* CSS Only */
    .post-body iframe{width:100%!important;}
    @media screen and (max-width:960px){
    .post-body iframe{max-height:90%}}
    @media screen and (max-width:768px){
    .post-body iframe{max-height:75%}}
    @media screen and (max-width:600px){
    .post-body iframe{max-height:60%}}
    @media screen and (max-width:480px){
    .post-body iframe{height:auto!important;max-height:auto!important}}
    • Igniel
      30 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yes it's responsive but the height will have a blank space with black background. And not every height is accurate as written above (with percentage).
    • sofyan Ya-an
      04 Agustus, 2019
      Profil: https://www.blogger.com/profile/00896429756820287073
      Menarik, mbak Igniel benar tentang kiri kanan menghasilkan ruang hitam, tapi dia juga benar ketika video selesai diputar, akan menghasilkan thumbnail inline yang rapi. Pada setiap layout tema versi 3 ini bekerja.

  • Unknown
    30 Juli, 2019
    Profil: https://www.blogger.com/profile/01203632663207709314
    didi, this script does not work in textrim blogger theme.....how to fix this problem?.....i was put the script code just before closing body tag.
    • Igniel
      30 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Put it INSIDE textrim() function.
    • Igniel
      30 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      function textrim() {
      // Put all of your scripts here
      var youtube = blablabla
      .
      .
      .
      }).resize();
      }
  • sofyan Ya-an
    20 Juli, 2019
    Profil: https://www.blogger.com/profile/00896429756820287073
    mbak Igniel is the best, membuat aku bolak balik mengunjungi sitenya. Hanya JQuery ini gak manjur buat salah satu dari empat template default blogger terbaru, yakni SOHO, mengapa ya...bisa bantu troubleshooting dong, mbak.
    • Igniel
      21 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa mas?
  • Cekiong
    11 Juli, 2019
    Profil: https://www.blogger.com/profile/16817382764814329295
    Terimakasih banyak, bekerjaa :D :D
  • sofyan Ya-an
    10 Juli, 2019
    Profil: https://www.blogger.com/profile/00896429756820287073
    Mbak Igniel, Kode ini tidak bekerja pada template Notable, gimana ya cara mengatasinya?
    Hanya template notabale saja. Pada 3 varian template terbaru (layout versi 3) lainnya sih mujarab.
  • Arwan
    31 Maret, 2019
    Profil: https://www.blogger.com/profile/06985908783193998309
    Terima kasih mbak igniel, scriptnya work di blok ane
    http://kucingsobo.blogspot.com
  • Channel Bunda
    06 Februari, 2019
    Profil: https://www.blogger.com/profile/13644232130094564270
    Tampilannya full screen ya di desktop...kalau pengen ukurannya 640x420px bagaimana ya???
  • baban
    07 Desember, 2018
    Profil: https://www.blogger.com/profile/16221878609933520197
    knapa skripnya di template iglo ga work??
    • Igniel
      11 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Dicoba di template Iglo versi berapa?
  • Ely setiawan
    01 November, 2018
    Profil: https://www.blogger.com/profile/04921274668344702727
    okegan saya mau coba duli
    • Anastasya Putri
      28 November, 2019
      Profil: https://www.blogger.com/profile/06064092011398657406
      Gan? Emang mba igniel cowo?
  • Saeful Manan
    31 Oktober, 2018
    Profil: https://www.blogger.com/profile/12354434206395568123
    cara insert videonya apakah masih pake cara lama??
    • Igniel
      31 Oktober, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cara insertnya normal pake kode embed bawaan yang diambil dari Youtube.
  • Unknown
    31 Oktober, 2018
    Profil: https://www.blogger.com/profile/04078963437326868747
    bedanya dimana mas.. dengan menggunakan width='100%'
    • Igniel
      31 Oktober, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau cuma pake width 100% nilai heightnya gak ngikutin otomatis. Dia bakal responsif tapi akan menyisakan ruang hitam kosong akibat dari height yang statis.

      Pake script ini nilai width dan height-nya berubah jadi lebih enak diliat.
  • Eka Awaludin
    31 Oktober, 2018
    Profil: https://www.blogger.com/profile/03027218065021816904
    Nice info. Btw mbak Igniel, tampilan mobile blog ini bagus banget.
    • Igniel
      31 Oktober, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Masih mas. Template blogmu juga keren banget.