Membuat Video Youtube Responsive di Blog

Table of Content

Jika kalian pernah mencoba untuk memasang video youtube menggunakan Embed pasti akan ada satu yang terasa tidak asing lagi bila dipasang pada blog kita. Yaitu tidak bisa menyesuaikan ukuran sesuai dengan tampilan pada blog yang kita jalankan tentu saja hal ini tidak enak dipandang karena pengunjung pada blog belum tentu menggunakan perangkat Komputer atau Laptop bisa saja menggunakan Smartphones.

Maka dari itu kalian bisa gunakan cara ini untuk memperbagus tampilan saat Video Youtube akan di pasang diblog dengan begitu tampilan bisa menyesuaikan dengan sendiri tanpa perlu edit kode Youtube tersebut.

Membuat Video Youtube Responsive di Blog

Untuk pemasangan sangat mudah sobat buka Blog > Klik Template > Klik Edit HTML

Kemudian tambahkan kode dibawah ini tepat diatas kode "</body">

<script> //<![CDATA[
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>

Terakhir tinggal simpan template

Untuk melihat bagaimana hasilnya nanti kalian bisa lihat video yang dibawah ini dan sesuaikan ukuran Browser yang sedang digunakan maka akan menyesuaikan sendiri.