Cara menambahkan latar belakang video ke website Anda

Poin penting

• Gunakan MP4 berdurasi 6–15 detik, tanpa suara, dan berulang dengan gambar poster.

• Jaga ukurannya beberapa MB: 1080p atau kurang, tanpa audio, fast start.

• Tambahkan lapisan overlay agar teks terbaca dan opsi jeda untuk aksesibilitas.

• Hormati prefers-reduced-motion dan pertimbangkan hanya poster di seluler.

Praktik terbaik latar belakang video

• 6–15 detik, loop mulus.

• Muted, autoplay, playsinline.

• Terkompresi (usahakan beberapa MB), 1080p atau kurang.

• Gambar poster untuk koneksi lambat.

• Overlay agar teks tetap terbaca.

HTML dan CSS untuk video latar belakang

<section class="hero">
  <video class="bg" autoplay muted loop playsinline poster="poster.jpg">
    <source src="loop.mp4" type="video/mp4">
  </video>
  <div class="content">…</div>
</section>

.hero{position:relative;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

Di website builder

Squarespace: Background section → Video. Webflow: elemen Background Video. Wix: latar belakang strip → Video. Tema WordPress dan Elementor: latar belakang section → Video.

Latar belakang video vs. galeri video

Loop latar belakang membangun suasana; bukan untuk konten yang seharusnya ditonton. Taruh video yang layak ditonton di pemutar atau galeri di bawah hero.

Cara tanpa kode

Tambahkan galeri video di bawah hero Anda untuk video yang benar-benar ingin ditonton orang.

Coba Elfsight Video Gallery

Aksesibilitas untuk latar belakang video

• Tambahkan tombol jeda untuk gerakan yang berulang.

• Hormati prefers-reduced-motion — tampilkan poster sebagai gantinya.

• Jaga kontras teks tetap terbaca di setiap frame.

@media (prefers-reduced-motion: reduce){
  .bg{display:none}
  .hero{background:url(poster.jpg) center/cover}
}

Pertimbangan untuk seluler

Browser seluler memutar otomatis video inline tanpa suara, tetapi kuota data dan baterai tetap penting. Pertimbangkan file yang lebih kecil atau hanya gambar poster di layar kecil.

Dari mana mendapatkan footage latar belakang

Rekam footage produk atau tim Anda sendiri agar autentik, atau gunakan video stok berlisensi. Pangkas menjadi loop mulus dan hapus audio.

Encode loop dengan ffmpeg

Ekspor klip Anda, lalu buat MP4 siap web tanpa suara dengan fast start (agar mulai diputar sebelum terunduh sepenuhnya):

# MP4 (H.264), 1080p wide, no audio, fast start
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart loop.mp4

# Optional smaller WebM (VP9)
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 loop.webm

# Poster image from the first frame
ffmpeg -i loop.mp4 -frames:v 1 poster.jpg

Naikkan nilai CRF untuk file lebih kecil, turunkan untuk kualitas lebih tinggi. Untuk latar belakang, detail yang lebih lembut tidak masalah — teks akan berada di atasnya.

Jaga teks tetap terbaca

.hero{position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));z-index:-1}
.hero .bg{z-index:-2}

Overlay gradien gelap menjaga judul putih tetap terbaca di atas frame yang terang. Periksa kontras pada bagian paling terang dari loop.

Anggaran performa

Latar belakang video vs. section video

Loop latar belakang menciptakan atmosfer; tak seorang pun menontonnya dengan penuh perhatian. Jika Anda ingin orang benar-benar menonton — demo produk, testimoni, kanal — beri video tersebut section tersendiri dengan pemutar, tempat mereka bisa melihat semuanya dengan suara.