Karena sudah terbiasa dengan menggunakan amp-iframe
, jujur saya agak sedikit lupa bagaimana cara membuat iFrame responsive. Maka ini sebagai catatan pribadi dan sedikit berbagi.
Bagi sobat yang ingin membuat iframe responsive, silahkan ikuti langkah-langkahnya
Tambahkan CSS
Silahkan tambahkan CSS ini di blog sobat
.ifr-container {
position: relative;
width: 100%;
overflow: hidden;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
Cara Penulisan
Untuk menulis di Blog, contoh HTMLnya seperti ini
<div class="ifr-container">
<iframe
allowfullscreen=""
frameborder="0"
height="170"
width="750"
class="responsife-iframe"
src="https://tutorial.kang-ismet.com/visitor-counter-ifr.html">
</iframe>
</div>
Sesuaikan tinggi dan lebar iframe. Kemudian harus ada
class="responsife-iframe"
Semoga Bermanfaat