Video Arkaplan Yapımı / Video Background For Website - HTML5 - CSS3 - Ders21
Evet arkadaşlar bu video dersimizde web siteleriniz için bir videodan nasıl arkaplan yapacağınızı öğrendik. Bu sitenize bir hareket getirecek güzel bir özellik oldu. Video derslerimizi takip edebilmek ve en yeni uygulamaları öğrenebilmek için kanalımıza abone olun.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Video Background</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="1.mp4" type="video/mp4">
</video>
</div>
<div class="content">
<h1>Video Background Yapımı</h1>
<p>Bu bölümde sizin için full ekran bir video ile arka plan nasıl yapılır bunu gördük.</p>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
*{
margin: 0;
padding: 0;
}
body{
font-family: Calibri;
}
.background-wrap{
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem{
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.6);
}
.content h1{
text-align: center;
font-size: 3em;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p{
text-align: center;
font-size: 1em;
color: #aaa;
letter-spacing: 4px;
}
Yorumlar
Yorum Gönder