Web sitenize video arka planı nasıl eklenir

Önemli noktalar

• Poster görselli, 6–15 saniyelik, sessiz, döngülü bir MP4 kullanın.

• Birkaç MB'ta tutun: 1080p veya altı, sessiz, hızlı başlatma.

• Okunabilir metin için bir katman ve erişilebilirlik için duraklatma seçeneği ekleyin.

• prefers-reduced-motion tercihine saygı gösterin ve mobilde yalnızca poster kullanmayı düşünün.

Video arka planı için en iyi uygulamalar

• 6–15 saniye, kusursuz döngü.

• Sessiz, otomatik oynatma, playsinline.

• Sıkıştırılmış (birkaç MB hedefleyin), 1080p veya altı.

• Yavaş bağlantılar için bir poster görseli.

• Metnin okunabilir kalması için bir katman.

Arka plan videosu için HTML ve CSS

<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}

Web sitesi oluşturucularında

Squarespace: bölüm Arka Plan → Video. Webflow: Background Video öğesi. Wix: şerit arka planı → Video. WordPress temaları ve Elementor: bölüm arka planı → Video.

Arka plan videosu ve video galerisi karşılaştırması

Arka plan döngüsü atmosfer yaratır; insanların izlemesi gereken içerik için değildir. İzlenmesi gereken videoları kahraman alanının altında bir oynatıcıya veya galeriye koyun.

Kodsuz yol

İnsanların gerçekten izlemesi gereken videolar için kahraman alanınızın altına bir video galerisi ekleyin.

Elfsight Video Gallery'yi deneyin

Arka plan videosu için erişilebilirlik

• Döngüsel hareket için bir duraklatma düğmesi ekleyin.

• prefers-reduced-motion tercihine saygı gösterin; bunun yerine posteri gösterin.

• Metin kontrastını her karede okunabilir tutun.

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

Mobil için dikkat edilecekler

Mobil tarayıcılar sessiz, satır içi videoyu otomatik oynatır, ancak veri ve pil önemlidir. Küçük ekranlarda daha küçük bir dosyayı veya yalnızca poster görselini düşünün.

Arka plan görüntüleri nereden alınır

Özgünlük için kendi ürün veya ekip görüntülerinizi çekin ya da lisanslı stok video kullanın. Kusursuz bir döngüye kırpın ve sesi kaldırın.

Döngüyü ffmpeg ile kodlama

Klibinizi dışa aktarın, ardından hızlı başlatmalı (tamamen inmeden oynamaya başlaması için), web'e hazır, sessiz bir MP4 oluşturun:

# 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

Daha küçük dosyalar için CRF değerini artırın, daha yüksek kalite için düşürün. Arka plan için daha yumuşak ayrıntı sorun değildir; metin üstüne gelecek.

Metni okunabilir tutun

.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}

Koyu gradyan katman, parlak karelerde beyaz başlıkları okunabilir tutar. Kontrastı döngünün en açık bölümünde kontrol edin.

Performans bütçesi

Arka plan videosu ve video bölümü karşılaştırması

Arka plan döngüsü atmosfer yaratır; kimse onu dikkatle izlemez. İnsanların gerçekten izlemesini istiyorsanız (ürün demosu, referanslar, bir kanal) bu videolara bir oynatıcıyla kendi bölümlerini verin; böylece tamamını sesli görebilirler.