Muhammad Hafid

Janganlah malas untuk berkarya, biarpun sederhana tetapi bermanfaat bagi orang lain. Kerjakan dengan penuh kesabaran dan keikhlasan

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.
Labels: html

Thanks for reading Iframe Style HTML Responsive . Please share...!

0 Comment for "Iframe Style HTML Responsive"

Terima kasih sudah berkunjung ke blog saya, semoga informasi nya bermanfaat buat anda.

Back To Top