Membuat Background Video Full Screen - Hallo coders,Selamat Pagi. Pada artikel kali ini saya akan berbagi tutorial tentang bagaimana Cara Membuat Background Video Full Screen Di Website . Saat ini banyak video-video di manfaatkan oleh para designer untuk di jadikan background website nya demi website tersebut terlihat lebih beranimasi dan terlihat keren. Dalam membuat Background Video Full Screen ini di awali dengan tanda tag HTML5 <video></video>.Untuk lebih jelasnya,yuk kita mulai tutorialnya.
Cara Membuat Background Video Full Screen
- Pertama,siapkan terlebih dahulu sebuah video yang akan di jadikan backgroundnya dan tempatkan di folder yang sama dengan file "video.html" nanti.
- Sekarang buat file html dengan nama "video.html", lalu ketikan script berikut kedalam file tersebut
<video id="my-video" class="video" autoplay muted loop>
<source src="contoh_video.mp4" type="video/mp4">
</video>
<source src="contoh_video.mp4" type="video/mp4">
</video>
Kode di atas di mulai dengan tag HTML5 <video> dan di properti videonya, saya menambahkan autoplay yang mana dengan properti ini video akan memainkan sendiri secara otomatis tanpa harus menekan button play terlebih dahulu. properti muted,artinya video yang di jalankan tidak memiliki suara atau sering di sebut di muted dan properti loop fungsinya agar si video tersebut terus mengulang videonya walaupun video tersebut telaj selesai.
- Lalu buat file css dengan nama "video.css" yang berfungsi agar backgroundnya dapat bekerja.Ketikan script berikut ke file tersebut.
div, h1, p, a, video, h2{
z-index: 2;
position: relative;
}
.content {
position: relative;
top: 30%;
z-index: 2;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.content__heading {
margin-bottom: 24px;
color: rgb(39,39,39);
font-size: 44px;
}
.content__teaser {
margin-bottom: 24px;
color: rgb(89,89,89);
font-size: 22px;
}
.content__cta {
display: inline-block;
margin: 0;
padding: 12px 48px;
color: rgb(255,60,100);
font-size: 22px;
text-decoration: none;
border: solid 4px rgb(255,60,100);
}
.video {
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
z-index: 2;
position: relative;
}
.content {
position: relative;
top: 30%;
z-index: 2;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.content__heading {
margin-bottom: 24px;
color: rgb(39,39,39);
font-size: 44px;
}
.content__teaser {
margin-bottom: 24px;
color: rgb(89,89,89);
font-size: 22px;
}
.content__cta {
display: inline-block;
margin: 0;
padding: 12px 48px;
color: rgb(255,60,100);
font-size: 22px;
text-decoration: none;
border: solid 4px rgb(255,60,100);
}
.video {
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
Dan berikut adalah kode selengkapnya atau anda bisa mendownload nya di Download Code
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Background Video Full Screen Dengan HTML5</title>
</head>
<style type="text/css">
div, h1, p, a, video, h2{
z-index: 2;
position: relative;
}
.content {
position: relative;
top: 30%;
z-index: 2;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.content__heading {
margin-bottom: 24px;
color: rgb(39,39,39);
font-size: 44px;
}
.content__teaser {
margin-bottom: 24px;
color: rgb(89,89,89);
font-size: 22px;
}
.content__cta {
display: inline-block;
margin: 0;
padding: 12px 48px;
color: rgb(255,60,100);
font-size: 22px;
text-decoration: none;
border: solid 4px rgb(255,60,100);
}
.video {
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
</style>
<body>
<video id="my-video" class="video" autoplay muted loop>
<source src="contoh_video.mp4" type="video/mp4">
</video>
</body>
</html>
<html>
<head>
<title>Cara Membuat Background Video Full Screen Dengan HTML5</title>
</head>
<style type="text/css">
div, h1, p, a, video, h2{
z-index: 2;
position: relative;
}
.content {
position: relative;
top: 30%;
z-index: 2;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.content__heading {
margin-bottom: 24px;
color: rgb(39,39,39);
font-size: 44px;
}
.content__teaser {
margin-bottom: 24px;
color: rgb(89,89,89);
font-size: 22px;
}
.content__cta {
display: inline-block;
margin: 0;
padding: 12px 48px;
color: rgb(255,60,100);
font-size: 22px;
text-decoration: none;
border: solid 4px rgb(255,60,100);
}
.video {
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
</style>
<body>
<video id="my-video" class="video" autoplay muted loop>
<source src="contoh_video.mp4" type="video/mp4">
</video>
</body>
</html>
Simpan,lalu coba kode tersebut di browser.
Baiklah mungkin hanya itu saja tutorial singkat tentang Cara Membuat Background Video Full Screen Dengan HTML5 ini. Apabila ada kesalahan atau kode nya tidak bekerja,anda bisa bertanya pada form komentar di bawah ini.Semoga dapat bermanfaat dan membantu anda.Terima kasih and Happy coding!
0 komentar:
Posting Komentar