I want to play each movie trailer while the user scrolls in the background. Like as the user scrolls to a new movie after some time the video starts playing. A division between the movies, like from perks of being a wallflower to top gun then the top gun video clip starts playing inside the div behind the content and content is very visible

I tried doin the basics but it did not work because I am starting out

body, html {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;

}

.Perks,
.Top,
.Kung,
.Conjuring,
.Grown {
    color: darkkhaki;
    font-size: 20px;
    
    font-style: oblique;
    padding-bottom: 400px;
    padding-top: 300px;
    padding-left: 150px;
    margin: auto;
    border: 1px solid #ccc;
    overflow-y: auto;
    position: relative;

}

img {
    margin: 0 auto; 
    width: auto;
    height: 700px;
}

header{
    background-color: #c7b198;
    border: solid;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 5%;
}

header nav {
    display: flex;
    gap: 30px;
}

header nav a {
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 99px;

}

header nav a.onto {
        background: gray
}

header nav a:hover {
    background: gray;
}

header nav a:hover > a:not(:hover) {
    background: none;
}

#theme-toggle{
    background-color: black;
    color: aliceblue;
    background-color: #333;
    color: #fff

}
.dark-theme{
    background-color: #000000;
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TV Shows</title>
</head>
<body>
    <header>
        <h1>My Favorite TV Shows</h1>
    <nav class = "main">
            <a ref = "#">Login</a>
            <a ref = "">Contact Me</a>
            <a ref = "">Feeling lucky!</a>
            <div class="Theme">
                <button id = "theme-toggle">Theme</button>
            </div>
        </nav>
    </header>

    <div class="Perks">
        <video autoplay muted loop id = "perks-bg">
            <source src = "Top Gun Maverick  - Motorcycle Kawasaki Ninja H2.mp4" type="video/mp4">
        </video>
        <img src="https://m.media-amazon.com/images/M/MV5BZThjMmQ5YjktMTUyMC00MjljLWJmMTAtOWIzNDIzY2VhNzQ0XkEyXkFqcGdeQXVyMTAyNjg4NjE0._V1_.jpg" alt="Perks">
        <h4>The Perks of Being a Wallflower</h4>
    </div>
    <div class="Top">
        <img src = "https://m.media-amazon.com/images/M/MV5BZjQxYTA3ODItNzgxMy00N2Y2LWJlZGMtMTRlM2JkZjI1ZDhhXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_FMjpg_UX1000_.jpg" alt="Top">
        <h4>Top Gun</h4>
    </div>
    <div class="Kung">
        <img src="https://m.media-amazon.com/images/M/MV5BODJkZTZhMWItMDI3Yy00ZWZlLTk4NjQtOTI1ZjU5NjBjZTVjXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_.jpg" alt="Kung">
        <h4>Kung Fu Panda</h4>
    </div>
    <div class="Conjuring">
        <img src="https://m.media-amazon.com/images/M/MV5BMTM3NjA1NDMyMV5BMl5BanBnXkFtZTcwMDQzNDMzOQ@@._V1_.jpg" alt="Conjuring">
        <h4 >The Conjuring</h4>
    </div>
    <div class="Grown">
        <img src="https://m.media-amazon.com/images/M/MV5BMjA0ODYwNzU5Nl5BMl5BanBnXkFtZTcwNTI1MTgxMw@@._V1_.jpg" alt="Grown">
        <h4>The Grown Ups</h4>
    </div>
    <script src = "script.js"></script>
</body>
</html>

1