Embed YouTube di Hero: Kenapa Muncul Batang Hitam dan Solusinya
Iframe YouTube di hero 1440x420 memunculkan dua batang hitam tebal. Penyebabnya di sisi player; tiga solusinya: backdrop grid, cover-crop, dan atur rasio.
Ringkasan
Hero slider di proyek Next.js tidak pas karena rasio video YouTube. Rasio 16:9 tidak bisa dilanggar, hanya bisa diisi atau dipotong. Solusi yang dipilih adalah memotong kelebihannya dengan overflow hidden.
Saya lagi merapikan hero slider di sebuah proyek Next.js ketika slide video YouTube pertama kali tampil. Hero-nya lebar 1440 piksel dengan tinggi fix 420 piksel. Kalau Anda ikut hitung, 16:9 di lebar 1440 itu tingginya 810 piksel, hampir dua kali lipat dari container. Karena iframe-nya saya pasang dengan absolute inset-0 h-full w-full, yang muncul di layar adalah video yang "pas" secara iframe tapi menjorok dua batang hitam tebal di kiri dan kanannya. Slider jadi terlihat seperti layar bioskop yang kehabisan film.
Hitamnya bukan background, itu player-nya
Tebakan pertama saya salah total: regangkan saja iframe sampai penuh, nanti videonya ikut penuh. Tidak jalan. Player YouTube menjaga rasio internalnya sendiri di dalam iframe apa pun bentuknya. Batang hitam itu digambar oleh player, bukan latar kosong iframe yang bisa saya warnai dengan CSS dari halaman induk. Selama rasio container berbeda dari 16:9, ada ruang yang harus diisi sesuatu, dan default player adalah hitam. Saya sempat mencoba beberapa cara di luar head dulu: mengganti background iframe, menempel layer div di atasnya, semuanya cuma menutupi gejala. Yang hitam tetap digambar ulang oleh player di frame berikutnya.
Dari sini saya baru paham kenapa trik CSS biasa tidak berdaya. Properti aspect-ratio memang bisa memaksa sebuah box mengikuti rasio tertentu, tapi hanya berpengaruh kalau minimal satu sisi box-nya auto; kalau width dan height sama-sama diset, rasionya diabaikan begitu saja [1]. Di Tailwind, class aspect-video adalah jalan pintas untuk nilai 16/9 ini [2]. Jadi pilihan saya cuma tiga: mengisi ruang kosongnya, memotong kelebihannya, atau menyetel ulang rasio containernya.
Tiga jalan keluar
Opsi 1, hiasi sisi kosongnya. Iterasi pertama di commit saya: iframe dirender pada rasio alaminya, h-full aspect-video, dipusatkan dengan left-1/2 -translate-x-1/2, lalu area kiri-kanannya diisi backdrop grid kotak-kotak 48 piksel dari currentColor dengan opacity 0.07. Alias dari pola brand situs. Batang hitam hilang karena sekarang ada motif yang mengisi ruang itu. Kelemahannya jelas: video tidak pernah penuh selebar hero. Untuk hero yang sengaja manetakan video sebagai aksen, ini malah kelebihan; komposisinya tenang dan tidak ada bagian video yang dikorbankan.
Opsi 2, full-bleed dengan cover-crop. Ini solusi final yang saya pakai setelah minta video harus penuh selebar hero. Iframe dibungkus div absolute inset-0 overflow-hidden, lalu iframe-nya sendiri aspect-video w-full diposisikan top-1/2 -translate-y-1/2:
<div className="pointer-events-none absolute inset-0 overflow-hidden">
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1&mute=1"
className="absolute left-0 top-1/2 aspect-video w-full -translate-y-1/2"
allow="autoplay; encrypted-media"
/>
</div>Dengan diarahkan ke arah cover: di hero 1440x420, frame 16:9 pada lebar penuh itu tingginya 810 piksel, jadi sekitar 195 piksel terpotong di tiap sisi atas dan bawahnya. Letterbox mustahil muncul karena yang kepanjangan justru dipotong. Satu catatan teknis: overflow: hidden memotong konten di padding box dan sekaligus menjadikan elemen itu scroll container, sementara overflow: clip memotong tanpa menjadi scroll container [3]. Untuk wrapper dekoratif di atas player yang memang pointer-events-none, hidden cukup. Angka 24 persen itu bukan rumus baku; dia turun atau naik mengikuti lebar layar, dan di ponsel portrait justru sisi kiri-kanan yang kosong, itulah kenapa backdrop grid tetap saya biarkan di belakangnya.
Opsi 3, samakan rasio containernya. Kalau desain mengizinkan, tinggal jadikan tinggi hero mengikuti 16:9, dan tidak ada apa pun yang perlu diisi atau dipotong. Ini paling jujur terhadap konten video, tapi jarang bisa dipakai karena tinggi hero biasanya sudah dikunci sama keputusan desain, seperti 420 piksel di kasus saya.
Satu hal lagi yang saya bawa dari embed ini: domain youtube-nocookie.com. Itu Privacy Enhanced Mode dari YouTube; tayangan video yang diputar di mode ini tidak dipakai mempersonalisasi pengalaman browsing penonton di YouTube, dan cara pakainya cuma ganti domain embed dari youtube.com ke youtube-nocookie.com [4]. Untuk hero yang autoplay, mode ini layak jadi default.
Pelajaran yang saya bawa
Rasio tidak bisa dilanggar, hanya bisa diisi atau dipotong. Kalau ruangnya beda bentuk dari 16:9, sesuatu pasti mengisinya: motif brand, potongan gambar, atau hitamnya player. Yang membedakan hero yang rapi dari yang terlihat rusak cuma keputusan soal siapa yang mengisi ruang itu.