Cara Membuat Full Screen iframe Hasil Embed dari Google Drive

19 Mei 2017 - - 5

Iframe adalah bingkai untuk menampilkan halaman website lain pada suatu halaman di web atau blog kita. Sebagai contoh Iframe yang banyak digunakan adalah saat kita memasang video dari youtube di blog kita, memasang Iframe sebuah dokumen yang dibuat di google drive, atau memasang iframe dari sebuah form yang dibuat di google drive, dan masih banyak contoh lainya.

Standar kode Iframe adalah sebagai berikut:
<iframe src="URL-WEB" width="300" height="200"></iframe>

Dengan penjelasan URL-WEB merupakan halaman web yang akan ditampilkan dalam Iframe, width:300 contoh menampilkan dengan lebar 300px, dan height: 200 contoh menampilkan Iframe dengan tinggi 200px.

Bagaimana jika kita menginginkan Membuat Full Screen iframe Hasil Embed dari Google Drive?

Untuk membuat Iframe full screen yang kita dapatkan dari google drive cukup dengan menambahkan kode berikut didalam Iframe:

style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"

Sebagai contoh kita mendapatkan kode Iframe sebuah form yang dibuat di google drive sebagai berikut:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5LjgRktAQ7a1ZhR-aRXyATPSgp4XYdh-p6-mXFAa_6UiDlw/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Memuat...</iframe>

Dengan menggabungkan dengan kode full screen diatas, maka hasilnya seperti pada kode berikut:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5LjgRktAQ7a1ZhR-aRXyATPSgp4XYdh-p6-mXFAa_6UiDlw/viewform?embedded=true" style=&quot;overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px&quot; height=&quot;100%&quot; width=&quot;100%&quot;>Memuat...</iframe>

Contoh hasil Iframe fill screen ini bisa anda lihat DISINI.

Demikian Cara Membuat Full Screen iframe Hasil Embed dari Google Drive, Semoga Bermanfaat.