Muhammad Hafid

Blog Belajar Python atau Django

Muhammad Hafid

Tugas kita itu adalah bukan untuk berhasil, tugas kita adalah untuk mencoba, karena di dalam mencoba itulah kita menemukan dan belajar membangun kesempatan untuk berhasil.

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"

Back To Top