HTML ve CSS ile Tam Ekran Video Arka Plan

Tam ekran arka planları, web tasarım dünyasında son zamanlarda çok popüler hale geldi. HTML5 video arka planları, web siteleri hazırlarken durağan sitelerden çok daha ilgi çekici hale gelmesini sağlıyor. Videolar dikkat çekmenin en etkili yollarından biri.

HTML ve CSS ile tam ekran video arka plan yapımı da son derece basit. Videoyu %100 ekrana sığdırmak ve videonun otomatik oynatılması önemli unsurlar. Aşağıda videoda eğitimi hazırlarken kullandığımız tam ekran video arka plan için HTML kodlarını görebilirsiniz. Muted kelimesi videoyu sessize almak içindir. Videonuz sesliyse ve sesli oynatmak isterseniz muted kelimesini çıkarmanız gerekir.

<div id="hero">

    <video autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </source></video>

    <div class="content">
      <div class="container">
        <h1><span id="Youtube_Sanagrafi">Youtube Sanagrafi</span></h1>
        <p>Full Screen Background</p>
      </div>
    </div>

</div>

Wordpress’te tema yapımı ile ilgiliyseniz full screen video arka planını Wordpress sitenize de entegre edebilirsiniz, zaten mantık aynı. Bu kodlar da style.css için kullanabileceğiniz kodlar.

body {margin:0;padding:0;}

#hero {
  position:relative;
}

#hero video {
  height:100vh;
  width:100%;
  background-position:absolute;
  z-index:10;
  object-fit:cover;
}

#hero .content {
  background:rgba(0,0,0,0.5);
  height:100%;
  width:100%;
  z-index:20;
  position:absolute;
  top:0;
  left:0;
  text-align:center;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .content h1 {
  color:#FFF;
  font-family:Arial,sans-serif;
}

#hero .content p {
  font-size:18px;
  color:#FFF;
  font-family:Arial,sans-serif;
}