Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.
Pada artikel kali ini saya akan berbagi tutorial lagi nih mengenai Cara Membuat Background Video Dengan HTML5-CSS3 Dan jQuery, bagaimana cara membuatnya, langsung saja simak langkah-langkah nya berikut.
1. Silahkan buka teks editornya terlebih dahulu kemudian ketikan kode HTML berikut.
1 2 3 4 5 6 7 8 9 10 11 |
<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>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> |
2. Setelah itu ketikan kembali kode CSS berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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; } } |
3. Sekarang ketikan kode jQuery nya seperti berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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"; } }) |
4. Kalo sudah semua jangan lupa disimpan, kemudian jalankan dibrowser masing-masing dan lihat hasilnya.
Menarik sekali yah background nya, silahkan kalian modifikasi lagi, sampai disini artikel mengenai Cara Membuat Background Video Dengan HTML5-CSS3 Dan jQuery, semoga bermanfaat, amin.
Selamat mencoba.