Video Graphics Done With HTML, CSS, and JavaScript

<section class="code-block">

            <div class="container" >
                <div id="top-banner" class="hide"><marquee id="marquee">Man in black knit cap and blue shirt counts</marquee></div>
                <div id="one" class="hide">1</div>
                <div id="two" class="hide">2</div>
                <div id="three" class="hide">3</div>
                <video id="video" controls preload="auto" controlslist="nofullscreen" disablePictureInPicture>
                    <source src="https://jeremycaudle.com/practice/captiontest/captiontest.mp4" type="video/mp4">
                    <source src="https://jeremycaudle.com/practice/captiontest/captiontest.webm" type="video/webm">
                </video>
            </div>

        </section>
        <script>
            /* Variables */
            const bannerTop = document.getElementById('top-banner');
            const numberOne = document.getElementById('one');
            const numberTwo = document.getElementById('two');
            const numberThree = document.getElementById('three');
            const marquee = document.getElementById('marquee');
            const video = document.getElementById('video');
            let time = video.currentTime;
            /* Functions */



            /* Events */

            marquee.stop();

            video.addEventListener('playing', (e) => {
                bannerTop.setAttribute('class', 'show');
            });

            video.addEventListener('play', (e) => {
                console.log('Playback has started.')
                marquee.start();
            });

            video.addEventListener('pause', (e) => {
                console.log('Playback has paused.')
                marquee.stop();
            });

            video.addEventListener('timeupdate', (e) => {
                time = video.currentTime;
                if(time > 2 && time < 3.25){
                numberOne.setAttribute('class', 'show');
                }
                if(time > 3.26 && time < 4.25){
                numberOne.setAttribute('class', 'hide');
                numberTwo.setAttribute('class', 'show');
                }
                if(time > 4.26 && time < 5.25){
                numberTwo.setAttribute('class', 'hide');
                numberThree.setAttribute('class', 'show');
                }
                if(time < 4.26 || time > 5.6){
                numberThree.setAttribute('class', 'hide');
                }
            }); 

        </script>

section.code-block {
                background-color: #777;
                margin: 1rem;
                padding: 1rem;
                font-family: Helvetica, Arial, sans-serif;
                z-index: 1;
            }

            .container {
                max-width: 60em;
                margin: 0 auto;
                z-index: 2;
            }

            video {
                padding: 0;
                margin: 0;
                border: 0;
                width: 100%;
                height: 100%;
                z-index: 3;
            }

            .container div {
                transition: opacity .2s ease-out;
                z-index: 4;
            }

            .hide {
                opacity: 0;
            }

            .show {
                opacity: 1;
            }

            @supports (display:grid) {

                .container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-template-rows: repeat(3, 1fr);
                    gap: 1rem;
                }

                video {
                    grid-area: 1 / 1 / 4 / 4;
                }

                #top-banner {
                    padding: 1rem;
                    margin: 1rem;
                    background-color: rgb(226, 23, 23);
                    text-transform: uppercase;
                    grid-area: 1 / 1 / 2 / 4;
                    max-height: 3rem;
                    text-align: center;
                    color: white;
                    text-shadow: 0 2px rgba(0,0,0,0.25);
                    font-weight: 600;
                    box-shadow: 10px 10px 5px rgba(0,0,0,0.25);
                }

                #one, #two, #three {
                    text-align: center;
                    align-self: center;
                    font-size: 8rem;
                    color: yellow;
                    text-shadow: 0 2px rgba(0,0,0,0.5);
                    font-weight: 900;
                }

                #one {
                    grid-area : 2 / 1 / 2 / 2;
                }

                #two {
                    grid-area : 2 / 3 / 3 / 4;
                }

                #three {
                    grid-area : 2 / 1 / 2 / 2;
                }

            }