Iframe Style HTML Responsive

Pernah bermain iframe ? Sebuah iframe berfungsi untuk menampilkan web page(halaman web) pada sebuah web page(halaman web). Maksudnya kita akan menampilkan suatu halaman web tertentu pada web kita. Tag yang digunakan untuk menampilkan iframe adalah <iframe> dan penutupnya </iframe>.

Kalian bisa membacanya disini : http://sahabatpemula.blogspot.co.id/2013/11/fungsi-iframe-html.html

Disini saya hanya ingin membahas bagaimana style iframe yang bagus disisipkan kedalam template agar responsive.

Pertama tama kalian harus mempunya file css, kalian bisa include di jadi satu dengan file html kalian atau kalian membuat file .css sendiri lalu memanggilnya.

Script CSS :

<style>
    .myIframe {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: auto;
    -webkit-overflow-scrolling:touch; //<<— THIS IS THE KEY
    border: solid black 1px;
    }
    .myIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
</style>

lalu pada script html kalian memanggil iframenya menggunakan div style, seperti dibawah ini :

<div class=’myIframe’ >
<iframe width=”560″ height=”315″ src=”http://www.muhammadhafid.com” allowfullscreen></iframe>
</div>

Yap mudah bukan ? maka iframe kalian akan menyesuaikan dengan template kalian dan jika template kalian responsive maka iframenya pun akan ikut responsive.

Semoga bermanfaat ya.

Leave a Reply Cancel reply