'how to change to a video from an image?

I attached an image here but I want to attach a video. I tried but was not able to maintain the same width and length and the page getting disproportionate. All i want to attach is a mute video file from youtube or local in place the image with autoplay in the loop and no controls.

Here I have uploaded the HTML and CSS I have created to give a minimal reproducible example.

HTML

<!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>VRT</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="1home_style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

    <!-- custom js file link  -->
    <script src="js/script.js" defer></script>

</head>
<body>
    


<!-- home section starts  -->

<section class="home" id="home">

    <div class="content">
        <span data-aos="fade-up" data-aos-delay="150">follow us</span>
        <h3 data-aos="fade-up" data-aos-delay="300">To The City Of Joy</h3>
        <p data-aos="fade-up" data-aos-delay="450">The possibilities for virtual reality are endless. Have you found your VR destiny? Virtual Reality trip, down a virtual rabbit hole. Jump in and explore, fully-immersed soul of kolkkata </p>
        <a data-aos="fade-up" data-aos-delay="600" href="#" class="btn">book now</a>
    </div>

</section>

<!-- home section ends -->



<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

<script>

    AOS.init({
        duration: 800,
        offset:150,
    });

</script>

</body>
</html>

CSS


/*# sourceMappingURL=style.css.map */@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 9rem;
}

html::-webkit-scrollbar {
  width: 1rem;
}

html::-webkit-scrollbar-track {
  background: #111;
}

html::-webkit-scrollbar-thumb {
  background: #29d9d5;
  border-radius: 5rem;
}

body {
  background: #111;
  overflow-x: hidden;
}

.home {
  margin: 0 auto;
  margin-top: 9rem;
  width: 90%;
  border-radius: 1rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
  background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 80vh;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 5rem;
}

.home .content {
  text-align: center;
}

.home .content span {
  font-weight: bolder;
  color: transparent;
  -webkit-text-stroke: 0.1rem #fff;
  font-size: 4vw;
  display: block;
}

.home .content h3 {
  font-size: 6vw;
  color: #fff;
}

.home .content p {
  max-width: 60rem;
  margin: 1rem auto;
  font-size: 1.4rem;
  color: #aaa;
  line-height: 2;
}

/*# sourceMappingURL=style.css.map */
htmlcss


Solution 1:[1]

What you can do is add a locally stored video in the html file and add the attributes muted and autoplay in the video tag after this you can make its display: absolute and then set its top, bottom, left, right values to make it align as per your need and after it you can set z-index to -1 or a lower value. If you want to change its width and height you will loose your video quality, so I would prefer to just adjust the other elements or objects on the page because loosing your video quality would definitely decrease the user experience of the website.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Animesh Jha

Related Questions