markup.html

<div class="alert_outer-container">
        <div class="alert_text-container">
            <span class="alert_text alert_text_delay">WELCOME!</span>
            <video id="main-image" class="alert_image" title="Alert video" autoplay=""><source src="https://static-cdn.jtvnw.net/alert-asset/v2/250829309/video/2Z63dCU1zysZazaNnWxjW294HKu/04Alert_follower-3.webm" type="video/webm"></video>
        </div>
</div>

style.css

html {
    overflow: hidden;
}

.alert_outer-container {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 1rem;
}
.alert_outer-container.playing {
    animation: 12s alert-animation ease-in-out forwards;
}

.alert_image-container {
    display: flex;
    flex-grow: 1;
    width: 50%;
    margin-top: 16px;
    justify-content: center;
    align-self: center;
}

.alert_text-container {
    position: relative;
    width: 100%;
    position: relative;
    z-index: 1;
    max-height: 100%;
    max-width: 100%;
}

.alert_text {
    font-family: 'Chewy', sans-serif;
    font-size: 68px;
    font-weight: 600;
    text-stroke: 2.25px #01406E;
    -webkit-text-stroke: 2.25px #01406E;
    width: 100%;
    top: calc(50% - 40px);
    left: calc(50% - 105px);
    position: absolute;
    color: rgb(129, 224, 253);
    text-transform: uppercase;
}


.alert_image {
    width: 100%;
    height: 100%;
}

.alert_text_delay {
    opacity: 0;
    animation-name: appear;
    animation-duration: 6.75s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forward;
    animation-delay: 8s;
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }

@keyframes alert-animation {
        0% {
            opacity: 0;
        }
        8.333333333333332% {
            opacity: 1;
        }
        91.66666666666667% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

@font-face {
        font-family: 'Chewy';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("https://fonts.gstatic.com/s/chewy/v18/uK_94ruUb-k-wn52KjI.woff2") format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }