Hai, Berjumpa lagi dengan saya Boy Panjaitan.
kali ini saya akan berbagi tutorial tentang cara membuat background website berupa vidio. Biasanya memang background itu
berupa image. Namun dibeberapa website seperti Paypal mereka menggunakan vidio sebagai background Halaman utamanya.
Mungkin anda bertanya bagaimana cara membuatnya? Oke. hal itu akan kita bahas disini
Pertama kita bahas mengenai css nya
<style>
body { margin:0;}
#bg { width:100%}
.konten { margin:20px; position:absolute; top:0;}
.konten p { color:#fff; font-size:24px; font-family: Arial, Helvetica, sans-serif}
</style>
id 'bg' akan kita gunakan pada vidio yang akan kita jadikan sebagai background sehingga lebarnya akan sesuai dengan lebar halaman.
class 'konten' digunakan sebagai tempat atau wadah daripada kontent website kita, disini digunakan position absolute agar konten menimpa vidio, top=0 berarti class 'konten' akan berada pada bagian paling atas halaman.
<body> <video id="bg" src="../upload/HTML5 Video.mp4" autoplay="true" loop="true" muted="true"></video> <div class="konten"> <p>Disini isi dari konten anda</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio? </div> </body>
pada tag vidio kita menggunakan attribute autoplay agar vidio otamatis dijalankan dan loop agar vidio diulang terus menerus kemudian muted untuk menonaktifkan suara
Oke selesai sudah pembuatan background vidionya. untuk style layout nya bisa anda ubah sendiri sesuai dengan kebutuhan anda, berikut full codenya
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background Vidio</title>
<style>
body { margin:0;}
#bg { width:100%}
.konten { margin:20px; position:absolute; top:0;}
.konten p { color:#fff; font-size:24px; font-family: Arial, Helvetica, sans-serif}
</style>
</head>
<body>
<video id="bg" src="../upload/HTML5 Video.mp4" autoplay loop muted="true"></video>
<div class="konten">
<p>Disini isi dari konten anda</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!
Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!
Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?
</div>
</body>
</html>
