Web Sitesine Arka Plan Videosu Nasıl Eklenir?

Merhabalar,

Bu yazımda web site arka planınıza nasıl video eklersiniz bundan bahsedeceğim. Birçok tasarımda karşınıza çıkmış olabilir, gelin biz de örnek bir arka plan videosu ekleyelim.

Ben arka plana tam ekran bir video, üstüne de başlık ve açıklama yazısı ekleyeceğim. Scroll ile aşağı inince veya butona tıklayınca açıklama yazısı çıkacak şekilde kodlayacağım.

HTML Kodu:

<section class="intro">
  <div class="video-container">
    <video src="/video.mp4" autoplay="" loop="" playsinline="" muted=""></video>
  </div>
  <div class="content">
    <h1>Tam Ekran Video</h1>
    <h4>Arka Plan için Tam Ekran Video Örneği</h4>
    <a href="#page" class="read-more">Devamını Oku</a>
  </div>
</section>

<section id="page">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor...</p>
</section>

HTML tarafında işlemlerimiz bu kadar. video etiketi içinde src niteliğine, ekleyeceğiniz videonun dosya yolunu giriyorsunuz.

Video etiketindeki temel özellikler:

• autoplay: Sayfa açıldığında videonun otomatik olarak başlamasını sağlar.
• loop: Video bittiğinde tekrar başlamasını sağlar (döngü).
• playsinline: Özellikle mobilde videonun tam ekran olmadan oynatılmasını sağlar.
• muted: Videoyu sessiz oynatır (sesleri kapatır).

CSS Kodu:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

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

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}

h1 {
  font-weight: 300;
  font-size: 50px;
  line-height: 1.2;
  margin-bottom: 15px;
}

/* Giriş Bölümü */
.intro {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

/* Video Konumlandırma */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #333;
}

.video-container video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Karartma Efekti */
.video-container:after {
  content: '';
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
}

.content {
  z-index: 2;
}

.read-more {
  display: inline-block;
  padding: 10px 30px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  border: solid #fff 1px;
  margin-top: 25px;
  opacity: 0.8;
  transition: .2s all;
  text-decoration: none;
}

.read-more:hover {
  transform: scale(.9);
}

/* İçerik Alanı */
#page {
  padding: 40px;
  text-align: center;
}

#page p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: auto;
}

Evet, temel işlemler bu kadar. CSS kısmında yorum satırlarında anlatılan bölümlerle düzeni kuruyoruz. Diğer tasarımsal alanları kendinize göre özelleştirebilirsiniz.

Örnek proje için: CodePen’deki örneğe tıklayın

Mutlu Kodlamalar! :)