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;


.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;

    background-color: #c7b198;
    border: solid;
    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;

    background-color: black;
    color: aliceblue;
    background-color: #333;
    color: #fff

    background-color: #000000;
    color: #fff;
<!DOCTYPE html>
<html lang="en">
    <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>
        <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 class="Perks">
        <video autoplay muted loop id = "perks-bg">
            <source src = "Top Gun Maverick  - Motorcycle Kawasaki Ninja H2.mp4" type="video/mp4">
        <img src="https://m.media-amazon.com/images/M/MV5BZThjMmQ5YjktMTUyMC00MjljLWJmMTAtOWIzNDIzY2VhNzQ0XkEyXkFqcGdeQXVyMTAyNjg4NjE0._V1_.jpg" alt="Perks">
        <h4>The Perks of Being a Wallflower</h4>
    <div class="Top">
        <img src = "https://m.media-amazon.com/images/M/MV5BZjQxYTA3ODItNzgxMy00N2Y2LWJlZGMtMTRlM2JkZjI1ZDhhXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_FMjpg_UX1000_.jpg" alt="Top">
        <h4>Top Gun</h4>
    <div class="Kung">
        <img src="https://m.media-amazon.com/images/M/MV5BODJkZTZhMWItMDI3Yy00ZWZlLTk4NjQtOTI1ZjU5NjBjZTVjXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_.jpg" alt="Kung">
        <h4>Kung Fu Panda</h4>
    <div class="Conjuring">
        <img src="https://m.media-amazon.com/images/M/MV5BMTM3NjA1NDMyMV5BMl5BanBnXkFtZTcwMDQzNDMzOQ@@._V1_.jpg" alt="Conjuring">
        <h4 >The Conjuring</h4>
    <div class="Grown">
        <img src="https://m.media-amazon.com/images/M/MV5BMjA0ODYwNzU5Nl5BMl5BanBnXkFtZTcwNTI1MTgxMw@@._V1_.jpg" alt="Grown">
        <h4>The Grown Ups</h4>
    <script src = "script.js"></script>