iframe Google Slides tampil secara Friendly di Blogger

Untuk membuat iframe Google Slides tampil secara ramahdi perangkat mobile maupun desktop, Anda dapat menggunakan beberapa opsi CSS untuk membuatnya responsif. Berikut adalah contoh kode yang dapat Anda coba:

Letakan di Style CSS

<style>
  .responsive-iframe {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Sesuaikan ini sesuai dengan rasio lebar:tinggi */
    height: 0;
    overflow: hidden;
  }
  .responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Gunakan Code ini untuk meletakan Embed/URL Google Slide:

<div class="responsive-iframe">

  <iframe allowfullscreen="true" frameborder="0" mozallowfullscreen="true" webkitallowfullscreen="true" 

  src="https://docs.google.com/presentation/d/e/2PACX-1vRcrwwvMfrWkd_D6OHwFxPf1Kk-qc1Q2sFfgzikyY8cZQ-uos6eywQ7RkzoNpOBYs2MB7LIsKP3cOE5/embed?start=false&amp;loop=false&amp;delayms=3000">

  </iframe>

</div>

Penjelasan kode:

.responsive-iframe: memberikan rasio tinggi lebar agar iframe dapat menyesuaikan . Padding-bottom diatur sesuai dengan rasio lebar:tinggi iframe. Nilai 75% umumnya bekerja dengan baik, tetapi Anda dapat menyesuaikannya sesuai kebutuhan.

Dengan menggunakan kode ini, iframe  seharusnya menjadi responsif dan tampak baik di perangkat mobile dan desktop.