Membuat Background Video dengan CSS

Merupakan trend desain web zaman now bila video dijadikan background, seperti banyak website website terkenal yang memakai video sebagai backgroundnya. Nah kali ini saya akan menshare bagaimana cara Membuat Background Video dengan CSS, baiklah kita langsung saja praktekan teman teman.

pertama kalian siap kan video yang akan kita jadikan background kalian bisa download di you tube. dan siapkan juga 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="">
        <h1 class="col1">COOL</h1>
    </div>
    <div class="images">
        <img src="7.png" alt="">
    </div>
    <div class="container2">
        <h1 class="col">VERY COOL</h1>
    </div>
</body>
</html>

setelah itu kalian siapkan file baru dan buat file css dan beri nama file tersebut dengan nama style.css dan simpan sejajar dengan file html yang kita buat 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 maka video yang ada akan menjadi background dan posisi nya selalu fixed walaupun sudah kita scroll.

Sekian tutorial Membuat Background Video dengan CSS semoga bermanfaat. Keep Coding 😀

Kategori