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 bizde ö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.
Hemen başlayalım;
<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>- autoplay: Videoyu sayfa açıldığında otomatik olarak oynatmayı sağlar.
- loop: Video bittikten sonra yeniden başlatarak videoyu döngüye sokar.
- playsinline: Özellikle mobil cihazlarda videoyu tam ekrana almadan veya sayfadan ayrılmadan site içinde oynatılmasını sağlar.
- muted: Video içinde bir ses kaynağı varsa onu kapatır ve videoyu tamamen sessiz bir şekilde oynatır.
Diğer metin alanlarını kendinize göre özelleştirebilirsiniz. Sitenizin geri kalan içeriğini main etiketi içine almanızı tavsiye ederim. Şimdi videoyu tam ekran olacak şekilde arka plana ayarlama ve diğer görsel işlemler için Css tarafına geçelim;
@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;
}
/* Giriş Bölümü Bitiş */
/* 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;
}
/* Video Konumlandırma Bitiş */
/* 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;
}
/* Karartma Efekti Bitiş */
.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 (Opsiyonel) */
#page { padding: 40px;
text-align: center;
}
#page p { font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
/* İçerik Bitiş */Evet Css ile yapılacak temel işlemler de bu kadar. Yorum satırında açıkladığım alanlarda temel yapıyı ayarlıyoruz. Geri kalan kısımlar ise tasarımsal özelliklerdir. Yorum satırını kapsamayan alanları kendi tasarımınıza göre özelleştirebilirsiniz.
İnceleyebilmeniz için Codepen üzerinden de size yapılan işlemi bırakayım.
See the Pen Tam Ekran Arka Plan Video by furkangiray.com (@furkangiray_com) on CodePen.
Evet bu şekilde sizde test edebilirsiniz. Tasarım durumuna göre ihtiyaç duyabiliyorsunuz. Umarım işinize yarar.
Mutlu Kodlamalar 🙂
