Membuat website responsive cukup mudah dilakukan jika dilakukan dari awal proses pembuatan. Tetapi akan sedikit menyulitkan ketika pengubahan tersebut dilakukan pada website dengan template nonresponsive yang memang disusun sebelum era mobile dimulai. Banyak komponen harus disesuaikan agar website menjadi responsive dan tampil dengan baik pada berbagai device serta ukuran layar.
Salah satu komponen halaman website html yang memerlukan perhatian dalam proses pengubahan website menuju responsive adalah table dan video. Tampilan website yang sudah responsive akan menjadi terlihat janggal pada halaman yang memuat tabel serta video hasil embed melalui iframe. Lebar tabel tidak bisa menyesuaikan lebar layar ketika ukuran lebar tabel lebih besar dari ukuran lebar layar. Begitu juga dengan video yang ditampilkan melalui iframe. Halaman responsive menjadi tidak optimal karena table dan video akan memaksa untuk mendorong lebar template, walaupun sudah diset menyesuaikan lebar layar.
Dalam mengatasi hal tersebut, perlu dilakukan pengaturan khusus untuk table dan video. Berikut adalah cara yang digunakan juga pada website ini.
Responsive Table
Untuk membuat responsive sebuah table caranya cukup mudah diterapkan, yaitu dengan mengapit table dengan tag seperti berikut.
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Tag div di atas bisa juga diset menggunakan css class.
Silakan baca:
Menerapkan CSS pada Bagian Tertentu Halaman Website HTML
Responsive Video
Salah satu cara menampilkan video di halaman website html adalah melalui iframe. Tetapi karena dalam pengaturan iframe ini melibatkan property width, menyebabkan lebar video bersifat statis dan tidak dapat menyesuaikan dengan lebar layar ukuran kecil. Untuk menangani masalah ini, gunakan kode css seperti berikut ini.
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Kemudian pada kode htmlnya atur menggunakan kode berikut ini.
<div class="video-container"><iframe ... ></iframe></div>
Dengan menggunakan kode-kode di atas, tampilan table dan video pada halaman website html akan tampil secara optimal di berbagai device dan berbagai ukuran layar berbeda.
Oleh Opan
Dipostkan February 16, 2017
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.
