youtube
Catatan teknis seputar web development, DevOps, dan integrasi AI.
4 artikel
- 00.42frontend
Mengapa Kartu Artikel Populer Video Tanpa Thumbnail
Kartu marquee cuma cek thumbnail eksplisit. Video item fallback ke gradient. Fix: rantai thumbnail → i.ytimg hqdefault → gradient. hqdefault selalu ada untuk video publik.
TL;DR: Halaman KotaPortal rusak. Video YouTube cuma tampil gradient biru-ungu. Sekarang sudah diperbaiki dengan rantai fallback.
#frontend#performance#nextjs - 20.47frontend
YouTube Mati di Produksi: Header Referrer yang Menekan Referer
Embed YouTube jalan di lokal, mati di produksi karena header Referrer-Policy same-origin. Satu atribut referrerPolicy per iframe menyelesaikannya.
TL;DR: Iframe YouTube tidak muncul di produksi. Penyebabnya adalah header Referrer-Policy yang memotong referer. Penyelesaiannya dengan menambahkan atribut referrerPolicy di iframe.
#youtube#iframe#http - 14.50frontend
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.
TL;DR: 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.
#css#youtube#tailwind-css - 01.01frontend
Embed YouTube, Mermaid & Recharts di Next.js Tanpa Plugin
Panduan lengkap embed YouTube, Mermaid, dan Recharts di blog Next.js tanpa plugin. Tingkatkan engagement +52% dengan styling konsisten dan dark mode.
#nextjs#youtube#mermaid