Cara Mengubah Embed, Object, Dan Iframe Dalam Postingan Blog Menjadi Responsif

Ketika responsive web design menjadi sebuah trend dan pilihan baru guna meningkatkan performa sebuah situs, tidak sedikit diantara para webmaster yang kemudian melakukan perombakan terhadap desain situs yang mereka kelola sehingga akhirnya memiliki desain responsif, yang artinya bahwa laman situs tersebut dapat ditayangkan secara optimal menyesuaikan dengan lebar layar atau fit to screen pada tiap perangkat yang digunakan untuk membukanya.

Akan tetapi walaupun dengan desain responsif tayangan laman secara umum otomatis menyesuaikan dengan dimensi layar perangkat yang digunakan oleh pengguna, bisa jadi hal yang terlupakan dan kemudian akan menjadi masalah adalah ketika dalam badan artikel terdapat obyek tertentu yang langsung memakai ukuran tertentu untuk menayangkannya. Sebagai contoh paling sederhana misalnya adalah iframe yang dipakai untuk menayangkan berkas atau dokumen dari Google Drive. Dalam hal ini misalnya adalah iframe yang dipakai untuk menampilkan dokumen seperti yang tampak pada gambar di atas, dimana iframe yang digunakan untuk menampilkan dokumen tersebut di blog ini adalah sebagai berikut:

<iframe src="https://docs.google.com/file/d/0B4uD9CiFn9-7LXgxaThwX001WGc/preview" width="640" height="480"></iframe>

Perhatikan bahwa iframe di atas langsung menggunakan ukuran lebar tertentu, yaitu width=”640” yang artinya pada dimensi layar berapapun iframe tersebut akan ditampilkan dengan ukuran tetap sesuai dengan ukuran lebar yang telah ditentukan tersebut. Sehingga apabila postingan yang mengandung iframe tersebut dibuka dengan memakai perangkat mobile yang memiliki lebar layar tidak lebih dari 640 piksel maka tampilan laman tidak lagi menjadi responsif dan perlu dilakukan ‘zoom’ terlebih dulu pada laman tersebut agar konten yang terdapat didalamnya dapat terbaca oleh mata pengguna.

Jadi berdasarkan contoh kasus tersebut dapat diambil sebuah kesimpulan bahwa apalah artinya menggunakan desain halaman yang responsif bila tidak diikuti dengan tampilan konten yang responsif pula.

Lantas bagaimana cara untuk mengubah iframe seperti di atas menjadi responsive, sehingga tampilannya dapat menyesuaikan secara otomatis dengan berapapun ukuran layar perangkat yang dipakai oleh pengguna? Terdapat beberapa cara yang dapat dilakukan untuk mengerjakan hal tersebut. Salah satu diantaranya adalah dengan cara mengubah ukuran lebar yang digunakan pada iframe kedalam ukuran persen. Sehingga apabila pada contoh iframe di atas semula ukuran lebar yang digunakan adalah width=”640”, maka ukuran ini dapat diganti kedalam bentuk persen semisal menjadi width=”100%” yang artinya bahwa lebar iframe akan menyesuaikan dengan lebar bidang posting. Dengan demikian maka dapat diartikan pula bahwa berapapun dimensi layar perangkat mobile yang dipakai oleh pengguna untuk membuka laman artikel yang dimaksud, maka lebar iframe yang terdapat didalamnya pun akan menyesuaikan secara otomatis.

Cara yang berikutya adalah dengan menambahkan CSS khusus ke dalam template. Dimana CSS ini nantinya akan berfungsi untuk menggantikan ukuran yang terdapat pada tiap-tiap iframe yang terdapat dalam postingan. Apabila menggunakan cara yang pertama ukuran lebar tiap-tiap iframe dapat dibedakan melalui persentase lebar iframe terhadap bidang posting, maka cara ini sangatlah berbeda karena berapapun ukuran awal yang dipakai pada setiap iframe nantinya akan memiliki ukuran lebar yang sama yaitu sesuai dengan ukuran lebar yang ditentukan dalam CSS-nya. Sebagai contoh misalnya jika dalam sebuah postingan terdapat 3 (tiga) buah iframe yang memiliki ukuran lebar berbeda, yaitu 240, 320, dan 360, maka apabila dalam CSS-nya memakai ukuran lebar 100%, secara otomatis lebar ketiga iframe tersebut akan menjadi sama yaitu 100%. Dimana dalam hal ini untuk mengerjakannya dapat Anda lakukan dengan cara menambahkan CSS berikut ini ke dalam template yang Anda gunakan.

.post-body embed, .post-body object, .post-body iframe {width:100% !important;}

Nah, bagaimana? Untuk mengubah embed, object, dan iframe yang terdapat dalam postingan menjadi responsif tidak terlalu rumit bukan? Semoga saja uraian yang penulis sajikan dalam artikel ini dapat diambil guna dan manfaatnya, dan apabila dalam penerapannya Anda mengalami kesulitan atau kendala, maka silakan poskan komentar dalam artikel ini untuk menyampaikan kesulitan atau kendala yang Anda alami tersebut.

Salam.