CSS ResponsiveLesson 93Preview gratis
RWD Videos
Lesson ini bagian dari CSS · Semua level
Ringkasan
Video responsif harus mengikuti lebar wadahnya tanpa merusak rasio gambar, mirip seperti gambar responsif. Untuk elemen `<video>` caranya sederhana: `width: 100%` dan `height: auto`. Sedangkan untuk video tertanam (iframe), kita memerlukan wadah dengan rasio aspek tetap, dulu memakai trik padding persentase dan kini lebih mudah dengan properti `aspect-ratio`.
Poin kunci
- `video { width: 100%; height: auto; }` membuat video mengikuti lebar wadah
- Wadah iframe memerlukan rasio aspek tetap agar tidak melompat saat dimuat
- `aspect-ratio: 16 / 9` menyederhanakan pembuatan wadah rasio tetap
- Video latar sebaiknya dikompres dan diberi cadangan seperti gradien atau poster
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.