Bagaimana caranya membuat sebuah background halaman web dengan menggunakan video. Jadi memang terlihat tidak biasa, adapun yang harus dipersiapkan adalah sumber dari video tersebut kemudian, penggunaan tag html video (html multimedia).
Untuk membuat sebuah latar dengan menggunakan video, tag html yang akan digunakan adalah tag html video (html multimedia).
Teknik yang akan digunakan pada pembuatan latar video ini adalah teknik position milik css dan z-index.
file index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Video Background</title> <link rel="stylesheet" type="text/css" href="video.css"> </head> <body> <video autoplay muted loop id="my-vid"> <source src="my-vid.mp4"> </video> <div id="my-title"> <h1>horizon zero dawn</h1> </div> </body> </html> |
file video.css
|
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 |
/* Video Background CSS */ @font-face{ src:url("horizon-font.ttf"); font-family: 'HorizonFont'; } *{ padding: 0; margin: 0; } video{ width: 100%; position: fixed; top: 0; left: 0; z-index: -1; } #my-title{ z-index: 1; font-family: 'HorizonFont', serif; color: #ffffff; display: flex; justify-content: center; align-items: center; height: 500px; font-size: 50px; } @media only screen and (max-width: 600px){ #my-title{ height: 300px; } #my-title h1{ font-size: 30px; } } |
untuk video dan jenis hurufnya teman-teman bisa ambil langsung, sudah disertakan diartikel ini.
Teknik ini tidak terlalu sulit, hanya mungkin bilamana tampilan layout ingin menyesuaikan beberapa perangkat sekaligus (responsive web), maka harus diatur untuk media query-nya.
Videonya dapat dilihat dibawah ini:
HTML Video Background
sumber:
https://www.w3schools.com/html/html5_video.asp