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;
}

Popular Eğitimler

CSS Nth-Child Kullanımı

CSS’te nth-child komutu nasıl kullanılır? Nth-child komutu kullanarak ilk element, son element ya da aralardaki element dizileri nasıl seçilir?

Htaccess ile Resimlerin Çalınmasını Engelleme

Hotlink koruması ile web sitesindeki resimlerin çalınması nasıl engellenir? Hotlink protection cpanel üzerinden nasıl etkinleştirilir? Htaccess kullanarak resim çalınmasını engellemenin yolları nelerdir?

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız,…

Temel MySQL Komutları ve Kullanımı

Sıkça kullanılan, bilinmesi gereken temel MySQL komutları nelerdir? Tablo silme, veritabanı silme, ayrıntıları gösterme, veritabanı oluşturma kodlarının tek bir sayfada derlemesi.

Bootstrap Izgara (Grid) Sistemi (Container, Col, Row Kullanımı)

Bootstrap’de ızgara sistemleri container, container-fluid, row ve sütun anlamına gelen col elemanlarından…

CSS3 Border Radius ile Yuvarlak (Oval) Köşeler

CSS ile yuvarlak köşeli div nasıl oluşturulur? Resmin köşeleri CSS ile nasıl yuvarlak veya oval yapılır? Bir resmin tamamı nasıl yuvarlak yapılır?