Video background not responsive.

Topic: Video background not responsive.

alex gouveia priority asked 3 years ago

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>

alex gouveia priority commented 3 years ago

This forked project behaves the same way. The part of the video shown on mobile is the left side of the video, https://gouveiaenterprises-alexfullpagetest.mdbgo.io/ Is there a way to center the video for smaller screens? Or replace the video with an image?

Please insert min. 15 characters.

Add comment

Michał Duszak staff answered 3 years ago

0 0 Best answer

You can work this around - referencing the forked project you provided - workaround this by giving the video a max-height and max-width so that it will scale on smaller screens. Notice that I have the max-width a value of 500vw not 100vw because of the aspect ratio. Test out certain values depending on your video.

.carousel-item > video {
    max-height: 100vh;
    max-width: 500vw;    
}

Hiding the video by the screensize is also possible with custom CSS, for example:

@media screen and (max-width: 768px) {
   .carousel-item > video {
       display: none;
        }
     }

Please insert min. 20 characters.

.carousel-item > video {
    max-height: 100vh;
    max-width: 500vw;    
}

Hiding the video by the screensize is also possible with custom CSS, for example:

@media screen and (max-width: 768px) {
   .carousel-item > video {
       display: none;
        }
     }

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.11.0
Device: iphone
Browser: safari
OS: ios 14
Provided sample code: No
Provided link: No

alex gouveia

15Support score
3Questions 0Answers 0Snippets