Mengatur Table dan Video Youtube Agar Responsive

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
Dibuat
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Protected by Copyscape CodeCogs - An Open Source Scientific Library