HTML5 ile Arkaplanda Video!

Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.

HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.

Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

HTML5 ile tam ekran video arkaplan nasıl yapılır?

İlk olarak HTML5’in medya oynatıcılarını yakından tanımak isteyebilirsiniz. Aşağıdaki makaleler ilginizi çekecektir.

1. HTML5 Video Oynatıcı
2. HTML5 Müzik Oynatıcı

Eğer hazırsanız örneğimiz hakkında konuşmaya başlayabiliriz. Yapacağımız işlemi yüzeysel olarak belirleyelim.

İlk olarak tüm ekranı (body elemanını) kaplayacak bir video oluşturacağız. Bunu yapmak için CSS‘den yardım alıp video elemanını genişleteceğiz. Daha sonra bu video elemanını z-index ile hiyerarşik olarak en alta koyup üst kısmına web sayfamızın diğer öğelerini ekleyeceğiz.

Özetle body elemanına yazılmış bir background tanımlaması yerine body’nin bir adım üstüne koyulmuş ve büyütülmüş video elemanı sayesinde arkaplanımızı oluşturacağız. Şimdi bu anlatımı kodlarımız ile örneklendirelim.

HTML Kodları

İlk olarak videomuzu oluşturalım. Dropbox üzerinden MP4 uzantılı kısa bir video çağırıyoruz. Autoplay(sayfa açılınca otomatik oynat), loop (sürekli tekrar et) ve muted (sessiz oynat) gibi iç tanımlamalar da yapıyoruz.

<video autoplay loop muted>
 <source src="http://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/Family-Guy.mp4" type="video/mp4">
</video>

Daha sonra içeriğimizi kodlarımıza ekleyelim.

<div class="icerik">
 <section>
 <h1>Full Arkaplan HTML5 Video</h1>
 <p>HTML5 Video Player ile tüm sayfayı kaplayacak video arkaplanlar oluşturabilirsiniz. Hem de dakikalar içerisinde!</p>
 </section>
</div>

CSS Kodları

En önemli kısım burası. İlk olarak HTML5 video oynatıcımızı geniş bir arkaplan yapısına çeviriyoruz.

video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
}

Şimdi de içeriğimiz için bir tanımlama yapalım.

.icerik {
  width: 30%;
  background: rgba(0,0,0,0.7);
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  left: 70%;
  text-align:center;
}

.icerik section{
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.icerik h1 {
  font-weight:300;
}

Bu kadar.

Kapanış

Küçük bir ipucu ile makaleyi tamamlıyoruz. HTML5 ile oluşturduğunuz video arkaplanlar üzerine PNG formatında bol desenli ve fazla göz yormayan görseller atarsanız daha şık sonuçlar elde edebilirsiniz. Bilginize.

İyi çalışmalar.