Script code agar embed youtube bisa responsif dan lazy load

Script code agar embed youtube bisa responsif dan lazy load. Silahkan digunakan dengan baik. Skrip ini dibuat dengan ChatGPT. Sehingga kevalidannya saya tidak tahu disamping juga belum mencobanya. Jika penasaran, silahkan dicoba!

berikut adalah script code yang dapat digunakan untuk membuat embed YouTube responsif dan lazy load:

phpCopy code
<!-- Embed YouTube dengan lazy load dan responsif -->
<div class="youtube-video" data-youtube-id="VIDEO_ID"></div>

<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Script untuk membuat embed YouTube responsif dan lazy load -->
<script>
// Lazy Load
$(function() {
  var youtubeVideos = $(".youtube-video");

  youtubeVideos.each(function() {
    $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + $(this).data('youtube-id') + '/hqdefault.jpg)');

    var iframe;

    $(this).click(function() {
      if (!iframe) {
        iframe = $('<iframe/>', {
          frameborder: 0,
          src: 'https://www.youtube.com/embed/' + $(this).data('youtube-id') + '?rel=0&showinfo=0&autoplay=1',
          width: $(this).outerWidth(),
          height: $(this).outerHeight()
        });
      }

      $(this).html(iframe);
    });
  });
});

// Responsif
$(window).resize(function() {
  $(".youtube-video").each(function() {
    $(this).find('iframe').width($(this).outerWidth()).height($(this).outerHeight());
  });
});
</script>

<!-- CSS untuk membuat embed YouTube responsif -->
<style>
.youtube-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

Untuk menggunakan script code ini, Anda perlu mengganti VIDEO_ID pada baris <div class="youtube-video" data-youtube-id="VIDEO_ID"></div> dengan ID video YouTube yang ingin Anda embed.

Script code ini menggunakan jQuery untuk mengimplementasikan lazy load dan responsif. Pastikan Anda telah memuat jQuery sebelum memuat script code ini.

Untuk mengatur ukuran responsif dari embed YouTube, gunakan CSS untuk menyesuaikan ukuran padding-bottom pada class .youtube-video.

jika diterapkan di blogspot, bagaimana caranya?

Untuk menerapkan script code ini di blogspot, Anda perlu mengikuti langkah-langkah berikut:

1. Login ke akun blogger Anda dan buka dashboard.
2. Pilih menu "Template" dan klik tombol "Edit HTML".
3. Cari kode </head> dan tempelkan kode berikut tepat di atasnya:
   

   cssCopy code
   <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
   

   
   Kode ini akan memastikan bahwa tampilan blog Anda responsif pada semua perangkat.
4. Tambahkan kode CSS untuk membuat embed YouTube responsif. Anda dapat menempatkan kode CSS ini di bawah kode <style type='text/css'>
   

   cssCopy code
   .youtube-video {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     cursor: pointer;
   }
   .youtube-video iframe {
     position: absolute;
     top: 0;
     left: 0;
   }
   

5. Tambahkan kode JavaScript yang disediakan di bawah kode CSS. Letakkan kode ini sebelum kode </body>
   

   phpCopy code
   <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
   <script>
   $(document).ready(function() {
     $('.youtube-video').each(function() {
       var videoId = $(this).data('youtube-id');
       $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + videoId + '/hqdefault.jpg)');
       $(this).append($('<div/>', {
         'class': 'play-btn'
       }));
       $(document).delegate('#' + $(this).attr('id'), 'click', function() {
         var iframe_url = "https://www.youtube.com/embed/" + videoId + "?autoplay=1&autohide=1";
         if ($(this).data('params')) iframe_url += '&' + $(this).data('params');
         var iframe = $('<iframe/>', {
           'frameborder': '0',
           'src': iframe_url,
           'width': '100%',
           'height': '100%'
         });
         $(this).html(iframe);
       });
     });
   });
   </script>
   

6. Sekarang, Anda dapat menambahkan embed YouTube ke postingan blog Anda dengan menambahkan kode berikut:
   

   kotlinCopy code
   <div class="youtube-video" data-youtube-id="VIDEO_ID"></div>
   

   
   Pastikan Anda mengganti VIDEO_ID dengan ID video YouTube yang ingin Anda embed.
7. Setelah menambahkan kode, klik tombol "Save" untuk menyimpan perubahan.

Dengan mengikuti langkah-langkah ini, Anda dapat membuat embed YouTube responsif dan lazy load di blogspot.