Video should be centered on mobile devices or smaller screens.

Video is not centered, left part of the video is displayed - not responsive.

<header>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
        <div class="container">
            <a class="navbar-brand" href="#!"><img src="~/images/Logos/TRANSPARENT-WB 02 final.png" width="130 em" /></a>
            <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto">
                    @*<li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#!">Home</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#!">About</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#!">Services</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#!">Attractions</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#!">Opinions</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#!">Contact</a>
                        </li>*@
                </ul>
                <ul class="navbar-nav d-flex flex-row">
                    <li class="nav-item me-3 me-lg-0">
                        <button type="button" class="btn btn-warning text-capitalize fs-5">Sign In</button>
                    </li>
                    @*<li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#!">
                        <i class="fas fa-shopping-cart"></i>
                        </a>
                        </li>
                        <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#!">
                        <i class="fab fa-twitter"></i>
                        </a>
                        </li>
                        <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#!">
                        <i class="fab fa-instagram"></i>
                        </a>
                        </li>*@
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navbar -->
    <!--Section: Design Block-->
    <!-- Full Page Intro -->
            <section class="view intro-video">
        <!-- Intro -->

        <div id="intro" class="text-center bg-image vh-100">
        @*style="background-image: url(../images/main_background.png);">*@

         <video id="myVideo" class="video-intro" poster="" playsinline autoplay muted >
            <source src="images/VideoBackground/FInalHeader.mp4" type="video/mp4">
        </video>

        <div class="mask" style="
        background: linear-gradient(
        45deg,
        rgba(1, 33, 105, 0.6),
        rgba(254, 221, 0, 0.6) 100%
        );">
        <div class="d-flex justify-content-center align-items-center h-100 mt-4">
        <div class="text-white">
        <h2 class="display-6 font-weight-bold my-2">Welcome to XXXXX Online!</h2>
        <h1 class="display-2 font-weight-bold my-2">Unlimited BJJ learning.</h1>
        <h3 class="display-7 font-weight-bold my-2">Watch anywhere. Easy renewal cancelation.</h3>
        <button class="btn btn-warning btn-lg">
        <h2 class="text-capitalize display-6">Sign Up <i class="fas fa-long-arrow-alt-right"></i> </h2>
        </button>
        </div>
        </div>
        </div>
        </div>
        <!-- Intro -->
        </section>
    <!--Section: Design Block-->
</header>