- Prepare the video:
- Choose a video file in a format supported by web browsers (such as MP4, WebM, or Ogg).
- Optimize the video by compressing it to reduce file size and improve loading times.
- Consider using video editing tools to trim or loop the video if necessary.
2. HTML structure:
- Create an HTML file and open it in a text editor.
- Set up the basic structure with the <html>, <head>, and <body> tags.
- Inside the <body> tag, create a <div> element that will contain the video background.
3. CSS styling:
- In the CSS section of the HTML file (either by using inline styles or an external CSS file), target the <div> element using a class or ID.
- Set the dimensions of the <div> element to cover the entire viewport using width: 100%; height: 100vh;.
- Add the position: fixed; property to ensure the video remains fixed in the background.
- Set the z-index property to a lower value if you have overlapping elements on the page.
4. Embedding the video:
- Within the <div> element, insert an HTML <video> tag.
- Specify the video source using the <source> tag and provide the path to your video file.
- Include alternative text or a fallback content within the <video> tag for browsers that don't support video backgrounds.
5. Adjust video properties:
- Use CSS to style the <video> tag by targeting it with the appropriate class or ID.
- Set the object-fit property to cover to ensure the video fills the entire <div> element.
- Customize other video properties like opacity, filter effects, or blending modes to achieve the desired visual effect.
6. Additional considerations:
- Consider adding a poster image as a placeholder for the video while it's loading or if the browser doesn't support video backgrounds.
- Test your website on different browsers and devices to ensure compatibility and adjust the video format if necessary.
Remember to optimize the video file size, as large videos can impact loading times and increase bandwidth usage. Additionally, provide alternative content or fallback options for users who may not be able to view the video background.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,
maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
</head>
<body>
<div id="video-background">
<video autoplay loop muted class="video">
<source src="video-1.mp4" type="video/mp4">
</video>
</div>
<section class="header" id="header">
<nav class="navbar" id="navbar">
<div class="logo">
<img src="logo-2.png">
</div>
<div class="links">
<a href="#">Missions</a>
<a href="#">NASA TV</a>
<a href="#">About</a>
<a href="#">Audiences</a>
<a href="#">Blog</a>
</div>
</nav>
<div class="side-slider">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box box1">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-3.png" alt="">
</center>
</div>
<div class="box box2">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-5.png" alt="">
</center>
</div>
</div>
<div class="swiper-slide">
<div class="box box1">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-6.png" alt="">
</center>
</div>
<div class="box box2">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-7.png" alt="">
</center>
</div>
</div>
<div class="swiper-slide">
<div class="box box1">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-8.png" alt="">
</center>
</div>
<div class="box box2">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-9.png" alt="">
</center>
</div>
</div>
<div class="swiper-slide">
<div class="box box1">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-10.png" alt="">
</center>
</div>
<div class="box box2">
<center>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
quibusdam veritatis, ipsa architecto ex quasi? ducimus, quisquam, illo
possimus sunt?
</h1>
<img src="img-1.png" alt="">
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<center>
<h1>
Space Love <span>Mission</span><br> <span>Revier</span>
</h1>
<button>Know More</button><br>
<ion-icon name="chevron-down-outline"></ion-icon>
</center>
</div>
</section>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@200&
family=Inter+Tight:wght@200&family=Montserrat:wght@200;300&family=Play&
family=Roboto+Condensed:wght@300&display=swap');
/*
font-family: 'Montserrat', sans-serif;
font-family: 'Play', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#video-background {
width: 100%;
height: 110vh;
position: fixed;
inset: 0;
z-index: -1;
background: #020408;
}
#video-background .video {
width: -101%;
height: 100%;
}
.header {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .5);
z-index: 999999;
}
.navbar {
width: 75%;
padding: 20px 2%;
display: flex;
justify-content: space-between;
align-items: center;
/* background: red; */
}
.links a {
font-size: 15px;
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
padding: 0 20px;
}
.links a:hover {
color: #ffffff67;
}
.side-slider {
width: 25%;
height: 100vh;
backdrop-filter: blur(10px);
position: absolute;
top: 0;
right: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
}
.box {
width: 100%;
height: 50%;
border-left: .00001rem solid #eeeeee28;
color: #fff;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.box:nth-child(2) {
border-top: .00001rem solid #eeeeee28;
}
.box img {
width: 150px;
height: 150px;
}
.box h1 {
font-size: 15px;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
text-align: center;
padding-bottom: 20px;
letter-spacing: 1px;
word-spacing: 2px;
}
.content {
width: 75%;
height: 73%;
display: flex;
align-items: center;
justify-content: center;
/* background: red; */
}
.content h1 {
font-size: 100px;
font-family: 'Play', sans-serif;
color: #fff;
font-weight: 100;
padding: 30px;
}
.content button {
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
font-family: 'Play', sans-serif;
border: none;
cursor: pointer;
}
.content button:hover {
background: #ffffff67;
}
.content ion-icon {
color: #fff;
display: block;
font-size: 50px;
margin-top: 20px;
transform: translateY(0px);
font-weight: 200;
transition: 2s;
animation: scroll-down 2s ease-in-out infinite;
}
@keyframes scroll-down {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
Comments
Post a Comment