Menjadikan VIDEO Menjadi Background Menggunakan HTML5 Dan CSS3

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Menjadikan VIDEO Menjadi Background Menggunakan HTML5 Dan CSS3, sudah tidak asing lagi bagi kita pencinta desain desain unik kususnya anak Front End yang sangat biasa sekali mengembangkan web menggunakan video menjadi latar belakang website, memang sangat takjub dengan hal ini,

tapi dilain sisi kita perlu perhatikan juga dengan adanya video diwebsite kita akan menambahkan beban data pada penyimpanan, tapi itu sudah menjadi tanggung jawab dari si pemilik website, oke sekarang saya ajarkan tentang cara pembuatannya, teman teman bisa salinkan scriptnya dibawah sini :

<body>
	<div class="container">	
		<video playsinline autoplay muted loop>
			<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
			<source src="http://thenewcode.com/assets/videos/polina.ogg" type="video/ogg">
		</video>
		<div class="bungkus">
			<div class="kata">
				<h1>Kenapa harus belajar bikin website?</h1>
				<p>Saya sendiri sudah tahu dan menyadari kalau trend saat ini sudah serba online. Behavior banyak orang sudah berubah. Tiap hari kita mencari informasi lewat Google dan banyak sekali membaca artikel di website / blog. Banyak informasi yang kita bisa dapatkan dari website, seperti tutorial, berita, tips dan trik, video, gambar, games, lagu dll. Banyak juga orang yang sukses karena website. Contohnya: para pemilik bisnis bisa dengan mudah menjangkau target marketnya dengan cara online. Sekarang bahkan sudah banyak ibu rumah tangga yang bisa jualan lewat website. Apalagi mahasiswa jurusan IT yang diwajibkan oleh dosennya agar harus bisa membuat website untuk tugas skripsi. Intinya, website itu penting! dan bisa membuat website itu sudah menjadi kebutuhan dasar yang perlu dipelajari oleh siapapun (baik itu pelajar, mahasiswa, guru, dosen, staff, freelancer, fresh graduate, pemilik bisnis, ibu rumah tangga, blogger, penulis, pelaku bisnis ukm dll). Buat yang belum pernah belajar membuat website pasti akan bilang kalau belajar website itu susah, bikin pusing kepala, butuh waktu lama dll. Itu semua cuma pemikiran yang salah!!! Belajar membuat website memang akan terasa sulit kalau otodidak atau cuma mengandalkan buku. TAPI berbeda kalau anda dibimbing langsung dan diajari step by step cara yang paling mudah membuat website. Saya yakin, anda hanya butuh waktu singkat untuk bisa membuat website sendiri. Tentu anda bisa membuktikannya sendiri dengan mengikuti pembelajaran GRATIS ini.</p>
			</div>
			<div class="kata1">
				<h1>Kenapa harus belajar bikin website?</h1>
					<p>Saya sendiri sudah tahu dan menyadari kalau trend saat ini sudah serba online. Behavior banyak orang sudah berubah. Tiap hari kita mencari informasi lewat Google dan banyak sekali membaca artikel di website / blog. Banyak informasi yang kita bisa dapatkan dari website, seperti tutorial, berita, tips dan trik, video, gambar, games, lagu dll. Banyak juga orang yang sukses karena website. Contohnya: para pemilik bisnis bisa dengan mudah menjangkau target marketnya dengan cara online. Sekarang bahkan sudah banyak ibu rumah tangga yang bisa jualan lewat website. Apalagi mahasiswa jurusan IT yang diwajibkan oleh dosennya agar harus bisa membuat website untuk tugas skripsi. Intinya, website itu penting! dan bisa membuat website itu sudah menjadi kebutuhan dasar yang perlu dipelajari oleh siapapun (baik itu pelajar, mahasiswa, guru, dosen, staff, freelancer, fresh graduate, pemilik bisnis, ibu rumah tangga, blogger, penulis, pelaku bisnis ukm dll). Buat yang belum pernah belajar membuat website pasti akan bilang kalau belajar website itu susah, bikin pusing kepala, butuh waktu lama dll. Itu semua cuma pemikiran yang salah!!! Belajar membuat website memang akan terasa sulit kalau otodidak atau cuma mengandalkan buku. TAPI berbeda kalau anda dibimbing langsung dan diajari step by step cara yang paling mudah membuat website. Saya yakin, anda hanya butuh waktu singkat untuk bisa membuat website sendiri. Tentu anda bisa membuktikannya sendiri dengan mengikuti pembelajaran GRATIS ini.</p>
			</div>
		</div>
	</div>
</body>

<style>
	.container {width: 100%; margin: auto;}
	video {min-height: 600px; width: 100%; height: auto; background-size: cover; position: fixed; z-index: -100}
	.kata {width: 700px; border:3px solid #eee; float: left; margin-left: 10px; margin-top: 10px; background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; color: #fff; padding:10px; text-align: justify;}
	.kata1 {width: 700px; border:3px solid #eee; float: right; margin-left: 10px; margin-top: 10px; background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; color: #fff; padding:10px; text-align: justify;}
	.bungkus {overflow: hidden; width: 1500px; margin: auto;}
</style>

Jika sudah disalinkan, coba teman teman save dan jalankan dibrowsernya, cukup mudah bukan ? teman teman bisa kembangkan ini lagi yah, cukup sekian tutorial tentang Cara Menjadikan VIDEO Menjadi Background Menggunakan HTML5 Dan CSS3.

dan untuk lihat hasilnya klik DEMO

Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA