Cara Membuat Video Youtube Responsif di Blog (Semua Perangkat)

Teknoakurat.com – Memasang video Youtube di blog, memang bisa ya? Tentu saja bisa. Jika Anda belum tahu, Blogger adalah milik Google. Youtube pun juga milik Google. Artinya, keduanya adalah perusahaan yang ada di bawah naungan Google.

Ketika kita memasang video Youtube di Blog, pasti ada satu masalah yang cukup menyebalkan, yakni ukuran bingkai iframe video tidak mengikuti lebar layar perangkat yang kita gunakan, atau biasa disebut tidak responsif.

Mungkin jika kita membukanya di laptop atau komputer tampilannya akan bagus. Tidak demikian jika kita membukanya di ponsel. Seperti ada yang terpotong di bagian sisi kanan.

Ketika dibuka dari perangkat yang lebih kecil, iframe Youtube akan terlalu besar dan keluar dari garis pembatas postingan. Jelek banget bukan?

Namun, untuk mengubah video Youtube agar jadi responsif pada blog di semua perangkat ini, teknoakurat punya solusinya, kok. Yuk simak!

Cara Agar Video Youtube Responsif di Blog

Dulu saya pernah pakai script lama yang mengharuskan mengubah kode penulisan embed. Nantinya video diambil dengan markup “data-src”. Tetapi ribetnya minta ampun. Harus gonta-ganti kode embed resmi bawaan Youtube segala.

Dengan secript terbaru ini, Anda tidak perlu lagi mengubah penulisan kode embed. Jadi jauh lebih praktis.

Membuat Video Youtube Responsif di Blog Menggunakan jQuery

• Login ke Blogger
• Pada halaman DASHBOARD, pilih TEMA.
•  Pilih EDIT HTML pada turunan tombol SESUAIKAN.
• Klik CTRL + F, kemudian ketik “</body>”.
• Cukup Anda simpan kode di bawah ini tepat “sebelum” tag  </body>.

/* Youtube Responsive by teknoakurat.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>" width="320" /></a></div>

Penulisan Kode Embed Video Youtube

Untuk penulisan kode embed untuk memasukkan video Youtube ke dalam postingan bisa dilakukan dengan cara normal dan tidak perlu mengubah apa pun. Cukup ambil kode embed-nya dan tulis seperti biasa.

Nah, sekarang video Anda sudah berubah menjadi full responsif karena nilai lebar dan tinggi akan otomatis menyesuaikan dengan ukuran layar yang sedang Anda gunakan. Selamat mencoba dan semoga sukses!

Membuat Video Youtube Responsif di Blog Menggunakan CSS

Sebagai tambahan saja, banyak sekali yang membandingkan antara jQuery dan CSS. Pakai CSS saja sebenarnya sudah biasa. caranya cukup mudah. Anda bisa copy script di bawah ini

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

}

Untuk yang versi CSS ini, memang video akan mengikuti layar, tetapi kekurangannya adalah akan menyisakan ruang kosong berwarna hitam. Dan hanya akan bekerja pada video yang berbentuk landscape. Artinya, untuk video potrait seperti reel Youtube tidak akan sesuai. Sedangkan script jQuery menurut kami jauh lebih efektif dan rapi, dan dapat menghilangkan ruang kosong yang hitam.

Baik CSS maupun jQuery, semuanya bisa work. Tergantung kebutuhan Anda. Semoga bermanfaat dan selamat mencoba!

Berbagi :