Ad Code

Responsive Advertisement

Ticker

6/recent/ticker-posts

How to add background video in HTML website

ime September 17, 2022

 


Here in this video, you will learn how to add a video background to a section in HTML. I use an HTML video tag to add video. it is better to use low-size video. so it will load quickly. if it take more time to load then use poster attribute to the video tag. 


I designed this with the very basics of HTML and CSS.
I hope you will enjoy it.

If this tutorial is helpful for you,  please like this video and subscribe to my channel to watch more web development tutorials.

Complete source codes and images at the end 🠋🠋🠋

Check the video tutorial 



Recommended Videos





HTML CODES

<!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">
    <link rel="stylesheet" href="assets/css/styles.css">
    <title>iMe Creative</title>
</head>
<body>
    <section class="hero">
        <div class="hero--text--cover">
            <div class="hero--text">
                <h1>We make you beautiful</h1>
                <p>Polish your skin with Teen's experience</p>
                <a href="tel:+94770466099" class="btn">Call now</a>
            </div>
        </div>
        <video class="hero--video" muted autoplay loop playsinline>
            <source src="assets/videos/teens.mp4" type="video/mp4">
        </video>
    </section>
</body>
</html>


CSS Codes

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero{
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100%;
}

.hero--video{
    height: 100vh;
    width: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero--text--cover{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
}

.hero--text{
    text-align: center;
    color: #fff;
}

.hero--text h1{
    font-size: 5rem;
    margin-bottom: 1rem;
}
.hero--text p{
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.btn{
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #b3007b;
    font-size: 1.1rem;
    text-decoration: none;
    color: #fff;
    border-radius: 3rem;
    cursor: pointer;
}

.btn:hover{
    background-color: #8e00c9;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}


Don't forget to Subscribe to our Youtube Channel for more.


ime

Posted by ime

Post a Comment

0 Comments