Membuat background video full-screen untuk website dengan html5 dan jquery | Tren desain web sekarang sudah berbeda dengan zaman dulu. Dimana sekarang kecepatan internet sudah jauh lebih baik dan teknologi yang digunakan untuk membuat website juga sudah semakin berkembang, seperti munculnya html5 dan jquery.

background video html5

Image credit by Coverr.com

Faktor-faktor penunjang tersebut ternyata membuat desainer web saat ini tidak takut lagi untuk menggunakan video sebagai background website, mereka tidak perlu khawatir websitenya menjadi berat dan sulit diakses. Maklum sekali lagi, koneksi internet sekarang sudah semakin bagus.

– Referensi lain: Menjadikan Video Youtube Sebagai Background Website

Pada kesempatan kali ini Jurnalweb akan menjabarkan sedikit bagaimana cara membuat video background full screen dengan html5 dan jquery.  Video ini akan otomatis diputar / autoplay saat pertama kali website dibuka, namun ada tombol pause jika ingin menghentikan video. Ketika video di pause maka tampilan akan berubah menjadi sedikit lebih gelap.

Bahan Untuk Membuat Video Background Website

Layaknya memasak, pertama siapkan dulu bahan-bahan / resource yang diperlukan sebagai berikut:

1. Sebuah video yang akan dijadikan background, dengan format .WEBM & .MP4, video yang akan digunakan adalah video yang dapat di download zip nya secara gratis di situs coverr.co. Sediakan juga file gambarnya yang diambil dari screenshot video tersebut dengan formal .JPG

Jika Anda ingin menggunakan video pendek lainnya, cari saja di 14 website penyedia stok video gratis berdurasi pendek ini.

2. Script jquery versi terbaru (Jquery v2.2.3).

Cara Membuat Background Video Website Dengan HTML5

HTML5

Untuk membuat background video dibutuhkan script HTML5 seperti dibawah ini yang berfungsi untuk memasukan video dan keterangan tambahan yang diperlukan. Serta sebuah tombol untuk pause untuk menghentikan video.

<video autoplay poster="Big-City-Life.jpg" id="bgvid" loop>
<!-- loop ditambahkan agar video diputar ulang jika sudah selesai  -->
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Big-City-Life.webm" type="video/webm">
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Big-City-Life.mp4" type="video/mp4">
</video>
<div id="citylife">
	<h1>Big City Life</h1>
	<p>Credit video by Coverr</p>
	<p><a href="http://www.jurnalweb.com/background-video-full-screen-html5-jquery">Lihat tutorial di Jurnalweb.com</a></p>
	<p>Ini adalah contoh pembuatan video sebagai background website dengan menggunakan HTML5 dan JQuery</p>
	<p>Gunakan video yang tidak terlalu panjang durasinya agar ukurannya lebih kecil dan tidak berat ketika di buka</p>
	<button>Pause</button>
</div>

CSS

Setelah struktur HTML nya dibuat, selanjutnya dipercantik dengan CSS agar posisinya menjadi lebih teratur, gunakan script seperti berikut ini.

– Baca jugaCara Membuat Background Slideshow dengan Jquery

Script dibawha ini juga akan menaruh keterangan dibagian kanan halaman web, dan membuat tombol pause menjadi lebih jelas.

body {
  margin: 0;
  background: #000; 
}
video { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('Big-City-Life.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
  opacity: .5;
}

#citylife { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#citylife button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#citylife button:hover { 
  background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(Big-City-Life.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

JQuery / Javascript

Sampai disini video sudah bisa jalankan dengan cukup baik, namun agar video bisa di berhenti ketika tombol pause di tekan, maka tambahkan script javascript dibawah ini. Taruh script ini di bagian bawah sebelum tag [/body].

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#citylife button");

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})

Jika sudah selesai maka sudah bisa dijalankan, untuk Anda yang tertarik ingin mencoba bisa download atau melihat demonya dibawah ini.

DEMO | DOWNLOAD

Semoga tutorial singkat dan sederhana ini bisa berguna untuk Anda, jika ada pertanyaan bisa di sampaikan melalui form komentar yang ada dibawah.