Oy guys. Dalam dunia website atau blogger tak jarang kita embedded video YouTube di artikel atau halaman web untuk postingan atau mempercantik tampilan.
Namun, video Youtube di embed biasa tidak menjadi responsive atau tidak tampil sempurna di semua ukuran layar terutama mobile. Contohnya bila dilihat dari desktop apik, namun di hp malah kepotong.
Cara mudah memperbaikinya kita hanya perlu menambahkan sedikit CSS dan menambah sedikit penulisan embed-nya. Murni CSS tanpa adanya script tambahan.
CSS YouTube Responsive
Kita akan menambahkan CSS berikut kemudian mengedit sedikit script embedded YouTube. CSS YouTube Responsive sebagai berikut. CSS ditambahkan ke CSS utama sesuai CMS yang dipakai.
.yt-vid {position: relative;padding-bottom: 56.25%; /* aspect ratio 16:9 */padding-top: 25px;height: 0;}
.yt-vid iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
CSS done sekarang untuk penulisan. Script embed YouTube akan kita bungkus dengan div, kemudian diberi class=”yt-vid” untuk memanggil fungsi CSS.
Youtube embedded disini
</div>
Bila agan memakai Blogger, berikut implementasi CSS Youtube responsive untuk platform Blogger:
1. Buka tata letak, tambahkan sebuah gadget boleh dimana saja.
2. Pilih HTML/ Javascript
3. Tempel kode CSS berikut lalu simpan, gadget tanpa judul
/* css yt responsive */
.yt-vid {position: relative;padding-bottom: 56.25%; /* aspect ratio 16:9 */padding-top: 25px;height: 0;}
.yt-vid iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
</style>
4. Lanjut, sekarang kita embed Youtube postingan seperti ini
5. Pratinjau dan video berhasil responsive
 |
| Sebelum | Web & Mobile |
 |
| Sesudah | Web & Mobile |
Selesai, sekarang video dapat menyesuaikan ukaran layar di semua perangkat atau sudah responsive. CSS tadi membuat video responsive di aspect ratio 16:9, agan juga bisa mengedit untuk aspect ratio lainnya.
Sekian trik kali ini tentang YouTube Responsive di website. Semoga bermanfaat, matur nuwun
