`Hello everyone! I'm diving into coding and creating my own website for the first time. I've managed to put together a decent site, but now I want to take it up a notch by adding video backgrounds that adjust automatically based on the device.
Below is the section of code where I need some help:
<section id="about" class="test-gradient-background about-section whiteline">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Who are we?</h2>
<p>Paragraph </p>
<a href="#contact" class="btn btn-outline-light btn-primary btn-lg">Contact Us</a>
</div>
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="./images/chess.mp4" type="video/mp4">
</video>
<div class="col-md-6 text-center">
<img src="./images/C8N.png" class="img-fluid cropped-ofp" alt="C8N Image">
</div>
</div>
</div>
</section>
css :
.gradient-background {
background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
background-size: 180% 180%;
animation: gradient-animation 18s ease infinite;
}
.whiteline {
border-bottom: 2px solid #ccc;
padding-bottom: 2rem;
}
`I could use some advice on how to seamlessly integrate a video tag with auto-adjusting capabilities. I've spent countless hours trying different methods with no luck. Although I've watched numerous tutorials on YouTube, none seem to work as easily as they depict. If anyone has a solution or alternative lines of code, I'd greatly appreciate it.`