Web sitelerinde tam ekran video arka planlar, kullanıcıya anında dinamik ve modern bir deneyim sunar. Sabit görseller yerine hareketli bir karşılama, ziyaretçinin ilgisini çekmek için güçlü bir yöntemdir.

Bu yazıda, JavaScript kullanmadan, sadece HTML5 ve CSS kullanarak nasıl responsive bir video arka plan oluşturacağınızı adım adım göstereceğim. Ayrıca, videonun üzerine metin içeriği eklemeyi ve bu metnin her ekranda okunaklı kalmasını sağlamayı da göreceksiniz.

Adım 1: HTML İskeletinin Kurulumu (<video> ve İçerik Alanı)

İlk olarak, HTML yapımızı kurmamız gerekiyor. İhtiyacımız olan üç temel bileşen var:

  1. Ana Kapsayıcı (#hero): Hem videoyu hem de içeriği barındıracak ana div öğesi.
  2. Video Oynatıcı (<video>): Arka planda oynayacak olan video öğesi.
  3. İçerik Alanı (.content): Video üzerine gelecek metin ve diğer bileşenleri tutan div öğesi.

Bu yapı, CSS ile katmanlama (stacking) yapmamız için gerekli.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tam Ekran Video Arka Plan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="hero">
        <video autoplay loop muted poster="fallback-image.jpg">
            <source src="video.mp4" type="video/mp4">
            </video>
        <div class="content">
            <div class="container">
                <h1>DevCrea Video</h1>
                <p>HTML ve CSS ile Full Screen Arka Plan</p>
            </div>
        </div>
    </div>
</body>
</html>

Bu koddaki önemli HTML nitelikleri:

  • autoplay: Video sayfa yüklendiğinde otomatik başlar. (Tarayıcı politikaları nedeniyle muted ile birlikte kullanılmalıdır.)
  • loop: Video bittiğinde sürekli başa sarar.
  • muted: Videonun sesini kapatır. Bu, autoplay özelliğinin çalışması için zorunludur.
  • poster: (Opsiyonel ama Önemli) Video yüklenemezse veya mobil cihazlarda oynamazsa gösterilecek bir "fallback" (yedek) görsel belirler.

Adım 2: Temel CSS Ayarları (Resetleme ve Kapsayıcı)

Şimdi style.css dosyamızı oluşturalım. İlk işimiz, tarayıcının varsayılan boşluklarını sıfırlamaktır (body reset).

İlgili Makaleler
Hyper-V Üzerinde Windows 11 Kurulumu: ISO Dosyasıyla Sanal Makine Nasıl Yapılır?

Ardından, #hero kapsayıcımızı position: relative olarak ayarlayacağız. Bu, içindeki diğer öğeleri (video ve içerik) position: absolute ile bu kapsayıcıya göre hizalamamızı sağlayacak.

/* style.css */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
}
#hero {
    position: relative;
    width: 100%;
    /* 100vh: Ekran yüksekliğinin %100'ünü kapla */
    height: 100vh; 
    overflow: hidden; /* Taşan kısımları gizle */
}

Burada height: 100vh kullanımı, #hero öğesinin kullanıcının ekran yüksekliği ne olursa olsun tam olarak doldurmasını sağlar.

Adım 3: Videoyu Arka Plana Sabitleme (CSS Positioning)

Şimdi videoyu #hero kapsayıcısının tamamını kaplayacak şekilde konumlandıralım. position: absolute ve z-index: 1 kullanarak videoyu arka plan katmanına yerleştiriyoruz.

Buradaki en kritik CSS özelliği object-fit: cover kuralıdır. Bu özellik, videonun en-boy oranını koruyarak kapsayıcıya sığmasını sağlar; böylece video bozulmaz, esnemez veya sıkışmaz.

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Videonun en-boy oranını koruyarak alanı kaplamasını sağlar */
    object-fit: cover; 
    /* İçeriğin arkasında kalması için düşük z-index */
    z-index: 1; 
}

Adım 4: Video Üzerine İçerik ve Filtre (Overlay) Ekleme

Metnin video üzerinde okunabilir olması için genellikle koyu bir filtre (overlay) eklenir. Bunu, .content katmanımıza bir arka plan rengi vererek yapacağız. rgba kullanarak %50 şeffaflıkta (opacity) siyah bir arka plan oluşturuyoruz.

Bu katman da position: absolute olmalı ve z-index değeri videodan yüksek olmalıdır (örn: z-index: 2).

İlgili Makaleler
Tailwind CSS v4 ile Özel Renkler (Config Dosyasını Düzenlemeden) 

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Siyah ve %50 şeffaf bir overlay (filtre) */
    background: rgba(0, 0, 0, 0.5);
    /* Videonun önünde olması için yüksek z-index */
    z-index: 2;
    /* Hizalama için (Adım 5'te detaylanacak) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* İçerikteki tüm metinler beyaz olacak */
    text-align: center;
}
.container {
    /* Konteyner, içeriğin çok genişlemesini engeller */
    max-width: 960px;
    padding: 0 20px;
}

Adım 5: İçeriği Yatay ve Dikey Hizalama (Flexbox)

Bir önceki adımda, .content katmanına display: flex ekledik. Bu modern web geliştirme tekniği, içerisindeki .container öğesini mükemmel bir şekilde ortalamamızı sağlar:

  • display: flex: Flexbox modelini aktif eder.
  • align-items: center: Öğeyi dikeyde (Y ekseni) ortalar.
  • justify-content: center: Öğeyi yatayda (X ekseni) ortalar.

Son olarak, başlık ve paragraf etiketlerimize stil vererek işlemi tamamlayalım. 

/* Adım 4'teki .content CSS'ine ek olarak stiller */
.content h1 {
    font-size: 3.5rem; /* 56px */
    margin-bottom: 10px;
    font-weight: 700;
}
.content p {
    font-size: 1.5rem; /* 24px */
    font-weight: 300;
}

İpuçları ve Sık Karşılaşılan Sorunlar

Sorun 1: Video Neden Otomatik Oynamıyor? (autoplay ve muted Zorunluluğu)

Eğer videonuz autoplay niteliğine rağmen oynamıyorsa, bunun nedeni modern tarayıcı politikalarıdır. Chrome, Safari ve Firefox, kullanıcının izni olmadan sesli videoların otomatik oynatılmasını engeller.

Çözüm: autoplay özelliğinin çalışması için <video> etiketine muted (sessiz) niteliğini eklemek zorunludur.

Sorun 2: Video Neden Ekrana Sığmıyor veya Bozuluyor? (object-fit Farkı)

Eğer object-fit: cover kullanmazsanız, video varsayılan olarak object-fit: fill değerini alır. Bu, videonun en-boy oranını bozarak kapsayıcıyı doldurmaya çalışacağı (esneyeceği) anlamına gelir.

  • object-fit: cover: (Tavsiye edilen) Oranı korur, alanı doldurur, gerekirse videoyu kırpar.
  • object-fit: contain: Oranı korur, videonun tamamını gösterir, boşluklar (letterbox) bırakabilir.
  • object-fit: fill: (Varsayılan) Oranı bozar, videoyu esnetir ve sıkıştırır.

Sorun 3: Mobilde Neden Çalışmıyor? (Düşük Güç Modu ve Fallback Çözümü)

En sık karşılaşılan sorun budur. iOS (iPhone) cihazlarda "Düşük Güç Modu" veya Android cihazlarda "Veri Tasarrufu" modları aktifse, tarayıcı pil ve data kullanımını azaltmak için autoplay özelliğini tamamen devre dışı bırakabilir.

İlgili Makaleler
Etkileşimli Alt Çizgi Animasyonu: HTML ve CSS

Çözüm: Bu durum için bir yedek planınız olmalı.

  1. HTML'deki <video> etiketine poster="fallback-image.jpg" niteliğini ekleyin.
  2. Video oynamazsa, tarayıcı otomatik olarak bu poster görselini gösterecektir.
  3. Bu görseli, videonun ilk karesi veya konseptinize uygun yüksek çözünürlüklü bir fotoğraf olarak seçin. Böylece kullanıcı boş bir ekranla karşılaşmaz.

Tam Kod Örneği (HTML + CSS)

Tüm adımları tamamladığımızda, kopyalayıp kullanabileceğiniz tam kodlar şu şekildedir:

index.html 

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tam Ekran Video Arka Plan</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="hero">
        <video autoplay loop muted poster="fallback-image.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
        <div class="content">
            <div class="container">
                <h1>DevCrea Video Rehberi</h1>
                <p>HTML ve CSS ile Full Screen Arka Plan</p>
            </div>
        </div>
    </div>
</body>
</html>

style.css

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
}
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}
.container {
    max-width: 960px;
    padding: 0 20px;
}
.content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.content p {
    font-size: 1.5rem;
    font-weight: 300;
}