Cacher is the code snippet organizer for pro developers

// Assign additional class "video-banner" on block configuration page; set region to "Header"

<div class="video-banner-wrapper">
    <div id="video-text">
        <h1 class="text-align-center">Heading Comes Here</h1>
        <h4 class="text-align-center">
            <a class="button primary" href="#">Learn More</a>
        </h4>
    </div>
    <video id="video-banner" autoplay loop muted poster="/sites/subdomain.us1.advisor.ws/files/image.jpg">
        <source src="https://subdomain-dev.us1.advisor.ws/sites/subdomain.us1.advisor.ws/files/video.mp4" type="video/mp4">
    </video>
</div>

<style>
.video-banner {
    height: 100vh;
    width: 100vw;
}
.video-banner div {
    max-height: 100vh;
    max-width: 100vw;
    height: 100%;
    width: 100%;
}
.video-banner .video-banner-wrapper {
    position: relative;
}
.video-banner .video-banner-wrapper div#video-text {
    position: absolute;
    max-width: 75%;
    height: fit-content;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 999;
}
.video-banner .block--custom__row > .field {
    padding: 0;
}
.video-banner .video-banner-wrapper #video-banner {
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.video-banner .video-banner-wrapper:before {
    background: rgba(0,0,0,0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    content: '';
    position: absolute;
    width: 100%;
}
@media screen and (min-width: 40em) {
    .video-banner .video-banner-wrapper div#video-text h1 {
        font-size: var(--h1-font-size,var(--h1-font-size,48px));
    }
}
</style>