CODEWITHSUNDEEP
htmlcssdebugginghtml5-video
luvs2spuge
luvs2spuge

Reputation: 75

Why won't my background video work in mobile view?

I've searched Google and have seen this question a few times but to no avail, does anyone have any clue as to why my video background won't play on mobile?

After going through countless SO posts, none of the articles/suggestions I'm finding on the web work for me

I've tried this suggestion (https://forum.webflow.com/t/html5-video-autoplay-now-working-on-mobile/40584), namely, but video still won't play on mobile devices.

What can I do to make video background play in mobile view?

<video playsinline autoplay loop muted>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
<div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white">
            <h1 class="display-3">Video Header</h1>
            <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
        </div>
    </div>
</div>


video {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

Upvotes: 2

Views: 392

Answers (1)

sid busa
sid busa

Reputation: 186

<div class="fullScreen">
    <video src="Videos/v1.mp4" autoplay loop muted class="screenVideo">         
    </video>
</div>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height:;">Hello`</h2>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height: ;">World</h2>

<style>
   *{
        margin: 0px;
        padding:0px;
    }
    .fullScreen{
        position: relative;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background-size: cover;     
        z-index: -1;
    }
    .screenVideo
    {
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
    }

</style>

Upvotes: 1

Related Questions