HTML/CSS'de Video Arka Planı Ekleme

Video Ekleme

Web sitenize nasıl video arka planı ekleyeceğimiz konusunda basit bir eğitim ! Duyarlı hale getirmek için tüm ipuçlarını ve püf noktalarını öğrenelim.

1. Kodunuzun temel yapısı.

Bir restoranın bizden güzel bir web sitesi oluşturmamızı istediğini düşünelim. Şimdilik sadece kafa ile bir HTML dosyası oluşturalım.Beğendiğiniz bir yazı tipi ekleyebilir veya bulduğunuz yazı tipini kullanabilirsiniz:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video Background</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto&display=swap"
      rel="stylesheet"
    />
  </head>
</html>

Şimdilik değerleri sıfırlayıp yazı tipini ekleyeceğiniz bir CSS dosyası oluşturun:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Playfair Display, sans-serif;
  background: #f1f1f1;
}

2. Videoyu HTML'nize ekleyin!

Şimdi, içinde video etiketi olacak,şekilde etiket olarak ekleyebileceğiniz bir kaynak soracak bir gövde oluşturmamız gerekiyor, ancak otomatik oynatma gibi bazı özellikler eklememiz gerekmekte (videoyu otomatik olarak oynatır), muted (varsa videonun sesini kapatmak için) ve loop (videoyu sonsuz kez tekrarlar):

<body>
      <div class="home">
        <video autoplay muted loop>
          <source src="ressources/cooking.mp4" type="video/mp4" />
        </video>
      </div>
  </body>

Videoyu kaynaklar klasörünüze eklemeniz gerekecek, benim yaptığım gibi.

Gördüğünüz gibi, işe yarıyor! Ancak ekranın yan ve alt kısmında kaydırma çubukları var ve video çok açık, bu yüzden üstüne metin eklerseniz metnin okunması zor hale gelmektedir. Hadi hepsini değiştirelim!

3. Biraz metin içeren bir kaplama ekleyin.

Restoranı sergilemek için videonun altına bir metin içeren bir yer paylaşımı ekleyelim:

<div class="overlay"></div>
<div class="home-content">
     <h1>High-End Kitchen.</h1>
     <div class="middle-line"></div>
     <button>DISCOVER</button>
</div>

4. Sayfaya stil verelim!

CSS dosyanıza gidin ve 100vh yüksekliğinde (tüm ekranı kaplamak için) bir kapsayıcı oluşturarak başlayın ve bazı öğeler (bu kabın alt öğeleri) mutlak olacağından göreli konumlandırın.

.home {
  height: 100vh;
  position: relative;
}

Şimdi video ile ilgilenelim:

video {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

Artık görüntü alanının tam genişliğini ve yüksekliğini alıyor, yani artık sayfanın yanlarında ve altında kaydırma çubuklarınız yok!

Şimdi videoyu bindirme ile karartalım:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.6);
}

Gördüğünüz gibi, şunları kullanabilirsiniz:

width: 100%;
height: 100%;

veya

 top: 0;
 left: 0;
 bottom: 0;
 right: 0;

Öğenizi ekranın tüm köşelerine sabitlediği için aynı şeyi yapar! Bu sadece bilmeniz için küçük bir numara.

Şimdi başlığın ve düğmenin boyutunu artırarak, ekranın ortasına düzenleyerek ve başlık ile düğme arasında dikey bölme çizgisi oluşturarak içeriği stillendirelim:

.home-content {
  width: 600px;
  margin: 0 auto;
  position: relative;
  top: 150px;
  color: #fff;
  z-index: 3;
}

.home-content h1 {
  font-family: Playfair Display, serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 85px;
  line-height: 1.1;
}

.middle-line {
  height: 200px;
  width: 2px;
  background: #fff;
  margin: 40px auto;
}

.home-content button {
  display: block;
  font-size: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  margin: 50px auto 0;
  padding: 16px 30px;
  cursor: pointer;
}