Video arka planlar, web sitenize dinamik bir görünüm kazandırır ve ziyaretçi etkileşimini artırır. WordPress'te bunu yapmanın 3 kolay yöntemini anlatıyoruz:
1. Elementor ile Video Arka Plan Ekleme (En Kolay Yöntem)
Avantaj: Sürükle-bırak, kod gerektirmez
Süre: 5 dakika
Adımlar:
Önerilen Eklentiler:
HTML5 Video Kodu Örneği:
html
Copy
Download
Run
<section class="video-background">
<video autoplay loop muted playsinline>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tarayıcınız video desteklemiyor!
</video>
<div class="video-content">
<h1>BAŞLIK BURAYA</h1>
</div>
</section>
CSS ile Stil Verme:
css
Copy
Download
.video-background {
position: relative;
overflow: hidden;
height: 100vh;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
}
.video-content {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
padding-top: 20%;
}
4. Önemli Performans ve SEO İpuçları
New
1. Elementor ile Video Arka Plan Ekleme (En Kolay Yöntem)
Avantaj: Sürükle-bırak, kod gerektirmez Süre: 5 dakikaAdımlar:
- Elementor Pro kurun (ücretsiz sürümde yok).
- Yeni bir sayfa oluşturun → Elementor ile düzenle'yi seçin.
- Bir "Bölüm" (Section) ekleyin.
- Sağ paneldeki "Style" sekmesine gidin → "Background" kısmını açın.
- "Background Type" olarak "Video" seçin.
- MP4/WEBM formatında bir video yükleyin veya YouTube/Vimeo linki ekleyin.
- "Video Options" ile otomatik oynatma, döngü ve sessiz başlatma ayarlarını yapın.
2. Eklenti Kullanarak Video Arka Plan Ekleme
Önerilen Eklentiler:
- Video Background (Ücretsiz, kolay kullanım)
- WP Video Lightbox (Pop-up efektli)
- Advanced Backgrounds (Gelişmiş özellikler)
- Eklentiyi kurun ve etkinleştirin.
- Sayfa düzenleyicide "Video Background" bloğunu ekleyin.
- Video yükleyin veya YouTube/Vimeo URL'si girin.
- Opacity, Loop, Mute gibi ayarları yapın.
- "Shortcode" kopyalayıp istediğiniz sayfaya yapıştırın.
HTML5 Video Kodu Örneği:
html
Copy
Download
Run
<section class="video-background">
<video autoplay loop muted playsinline>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tarayıcınız video desteklemiyor!
</video>
<div class="video-content">
<h1>BAŞLIK BURAYA</h1>
</div>
</section>
CSS ile Stil Verme:
css
Copy
Download
.video-background {
position: relative;
overflow: hidden;
height: 100vh;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
}
.video-content {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
padding-top: 20%;
}
4. Önemli Performans ve SEO İpuçları
- Video Boyutu: 5MB'den büyük videolar yavaşlatır → HandBrake ile sıkıştırın.
- Format: WEBM + MP4 ikilisi kullanın (tüm tarayıcılar için uyumlu).
- Mobil Optimizasyon:
- Mobilde otomatik oynatma çalışmayabilir → Yedek resim ekleyin.
- playsinline parametresi ekleyin (iOS için).
- SEO: Video arka planlı sayfalara metin içeriği eklemeyi unutmayın.
| Yöntem | Zorluk | Esneklik | Mobil Uyum |
|---|---|---|---|
| Elementor |  | | |
| Eklenti | | | |
| Manuel Kod | | | |
- Tasarımcılar/Başlangıç Seviye: Elementor veya Video Background eklentisi
- Geliştiriciler: Manuel kodlama (en hafif çözüm)
- Şirket ana sayfaları (Tanıtım videosu)
- Ürün lansman sayfaları
- Portföy siteleri (Yaratıcı arka planlar)
New