Uncaught TypeError: video is undefined

When a video is played. This mask should disappear when I play the video. that can't be I think it can be done with javascript. How?

blade

<div class="container-fluid background-video">
    <video poster="{{ asset('storage/'.$setting->image) }}" class="w-100" controls>
        <source src="{{ asset('storage/'.$setting->video)  }}" type="video/mp4">
        <source src="{{ asset('storage/'.$setting->video)  }}" type="video/ogg">
        <source src="{{ asset('storage/'.$setting->video)  }}" type="video/webm">
        <object data="{{ asset('storage/'.$setting->video)  }}">
            <embed src="{{ asset('storage/'.$setting->video)  }}">
        </object> 
    </video>
</div>

style

.background-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* This creates a 16:9 aspect ratio container for the video */
    background-color: #000; /* Set background color to black */
}
.background-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Change the opacity as per your requirement */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* This applies a gradient mask to fade out the edges of the video */
}

script

<script>
    const mask = document.getElementsByClassName("background-video")[0];
    const video = document.getElementsByTagName("background-video")[0];

    video.addEventListener('play', function() {
        mask.style.display = "none";
    });
</script>