Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Memasang Video Youtube (Embed) Yang Responsive Di Blogger



Cara Memasang Video YouTube (EMBED) yang Responsive di Blogger


Halo sobat blogger,sebelumnya saya sudah pernah membahas wacana Cara Praktis Embed/Memasang Video Youtube di Postingan Blog ,namun dari tutorial tersebut masih ada kekurangan yaitu ukuran video yang tampil di blog tidak responsive/tidak mengikuti ukuran layar dari perangkat yang sedang membukanya.

Ketika postingan yang sudah terpasang video youtube dibuka dari desktop PC/Laptop mungkin tampilannya terlihat normal,namun jika dilihat dari smartphone atau gadget yang lebih kecil ukuran iframe youtube terlalu lebar dan besar. Sehinga terlihat kurang rapi.

Oleh alasannya yakni itu disini saya akan menawarkan tutorial untuk menciptakan tampilan video youtube menjadi responsive ketika di saluran dari banyak sekali perangkat gadget.

Cara Memasang/Embed Video YouTube yang Responsive di Blog


Berikut ini langkah-langkah yang sanggup anda lakukan untuk menciptakan ukuran iframe dari video youtube sanggup responsive mengikuti layar :

a. Memasang Script Responsive iFrame untuk Embed Video YouTube


Pertama kita harus mengedit HTML di template blog kita untuk menambahkan script yang menciptakan iFrame YouTube menjadi responsive secara otomatis,jadi setiap kita akan memasang video ke dalam postingan cukup copy-paste script embed yang di dapatkan dari YouTube ibarat biasa tanpa harus mengeditnya terlebih dahulu.

  • Buka Blogger.com
  • Sign In dengan Akun Google anda
  • Masuk ke Dashboard Blogger
  • Pilih sajian Tema
  • Klik Edit HTML
  • Cari aba-aba berikut :

</body>

  • Paste script berikut sempurna diatas aba-aba tadi :

<script> //<![CDATA[
/* Youtube Responsive by www. */
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>

  • Setelah itu klik Simpan Tema

b. Memasang Script Embed dari YouTube


Untuk memasang script embednya cukup gampang ibarat biasanya :

  • Buka YouTube.com
  • Cari dan Tonton video yang akan anda pasang di blog
  • Klik Bagikan
  • Pilih Sematkan
  • Copy Script yang Muncul
  • Lalu Paste ke Postingan Blogger anda

Atau anda sanggup membaca tutorial lengkapnya di sini => Cara Praktis Embed/Memasang Video Youtube di Postingan Blog

Penutup


Itulah tutorial Cara Memasang Video YouTube (EMBED) yang Responsive di Blogger ,dengan mengikuti setiap langkah-langkah yang sudah saya tuliskan di tutorial tersebut anda akan lebih gampang untuk menciptakan tampilan yang responsive ketika melaksanakan embed video dari youtube ke postingan blogger.
Sumber https://www.dirga.id/