Membuat Background Video dengan CSS
Adalah trend desain web zaman now bila video dijadikan background, seperti banyak laman laman terkenal yang memakai video selaku backgroundnya. Nah kali ini saya akan menshare bagaimana cara Membuat Background Video dengan CSS, baiklah kita seketika saja praktekan teman teman.
pertama-tama kalian siap kan video yang akan kita jadikan background kalian dapat unduh di you tube. dan siapkan pun dua gambar jpeg atau png. Di sini saya menyiapkan dua gambar png dengan nama empat dan tujuh dan satu video mp4 dengan nama Motion graphics portofolio. lihat contoh:
setelah itu kalian buka text editor kesayangan kalian dan ketikan kode HTML di bawah ini. dan simpan dengan nama index.html letakan sejajar dengan video yang kita siapkan tadi yah teman teman.
index .html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Background Image Cool!</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<video autoplay muted loop id=myVideo >
<source src=Motion graphics portfolio.mp4 type=video/mp4>
Your browser does not support HTML5 video.
</video>
<div class=container>
<h1 class=col>SCROLL ME</h1>
</div>
<div class=container1>
<img src=4.png alt=Adalah trend desain web zaman now bila video dijadikan background Merancang Background Video dengan CSS>
<h1 class=col1>COOL</h1>
</div>
<div class=images>
<img src=7.png alt=Adalah trend desain web zaman now bila video dijadikan background Merancang Background Video dengan CSS>
</div>
<div class=container2>
<h1 class=col>VERY COOL</h1>
</div>
</body>
</html>
setelah itu kalian siapkan file baru dan bikin file css dan beri nama file tersebut dengan nama style.css dan simpan sejajar dengan file html yang kita bikin tadi.
style.css
* {
padding: 0; margin:0;
/*box-sizing: border-box;*/
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
.container{
height: 900px;
/*background:#123;*/
background-color: rgba(2, 49, 46, 0.84);
width: 100%;
margin:auto;
}
.container1{
height: 900px;
/*background:#123;*/
background-color: rgba(105, 2, 55, 0.86);
width: 100%;
margin:auto;
}
.container2{
height: 900px;
/*background:#123;*/
background-color: rgba(255, 77, 0, 0.89);
width: 100%;
margin:auto;
}
video{
z-index: -100;
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.col{
color: #fff;
font-family: arial;
text-align: center;
line-height: 900px;
font-size: 50px;
}
.col1{
color: #fff;
font-family: arial;
text-align: center;
line-height: 400px;
font-size: 50px;
}
img{
width: 100%;
}<span id=mce_marker data-mce-type=bookmark data-mce-fragment=1></span>setelah itu coba kalian buka di browser kalian, bila kode kodenya benar karenanya video yang terdapat akan menjadi background dan posisi nya selalu fixed walaupun telah kita scroll.
Demikian panduan Membuat Background Video dengan CSS semoga bermanfaat. Keep Coding 😀
Sumber https://kursuswebsite.org
