BLANTERWISDOM101

Membuat Embed Video YouTube Lebih Responsive di Blogger & Web [CSS]

22 Maret 2021
0
CSS YouTube Responsive

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.

/* 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%;}

CSS done sekarang untuk penulisan. Script embed YouTube akan kita bungkus dengan div, kemudian diberi class="yt-vid" untuk memanggil fungsi CSS.

<div class="yt-vid">
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.

Di tata letak, tambahkan gadget

2. Pilih HTML/ Javascript

Pilih HTML/Javascript Blogger

3. Tempel kode CSS berikut lalu simpan, gadget tanpa judul

<style>
/* 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

Contoh postingan menggunakan css yt responsive

5. Pratinjau dan video berhasil responsive

Sebelum memakai CSS yt responsive
Sebelum | Web & Mobile
Sesudah memakai CSS yt responsive
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

Share This :
Feriansyah


Tech enthusiast & tech developer

Reaksi dan Komentar