Mobile Fixed Background Video

[mw]

Re: Use a video as page background

I'm trying to create a fixed background video. On desktop everything works fine, just on the mobile breakpoint the video gets cut and isn't fullscreen anymore.

I could change .coulmn-wrap to position: fixed as well and everything would work,
however, in the final application this is not an option.

My html

<video playsinline="" muted="" loop="" class="autoplay loaded bg-videoo" autoplay=""><source src="https://www.domain.de/wp-content/uploads/2021/06/file-name.webm" type="video/webm"></video>

and CSS

 .bg-videoo {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

In general videos like this work on mobile. Like with this Pen https://codepen.io/chriscoyier/pen/jmXapj?editors=1100
So it has to have something to do with laytheme.

Could you help me?

[Richard]

Dear @mw

Have you found a solution recently? also are you able to post a link to your website? 🌝

---

Talk soon & best wishes

Richard

[mw]

Hey @Richard, no unfortunately not. I've set up a test page
https://www.markuswindt.de/gfgg/

right at the mobile breakpoint, the video collapses. It's not a custom mobile CSS issue - deleted all and tested. same behavior.

[mw]

@Richard - I've found out that the problem is down to custom mobile layouts.

Surprisingly, if there is NO custom mobile layout, the video does not work.
If there is a custom mobile layout the video shows as expected.

Any Idea how to solve this?

[Richard]

Dear @mw

Sorry for the delay over the weekend.
When inspecting the code 🔍 i removed the following:

bg-videoo {
    /* object-fit: cover; */
    /* width: 100vw; */
    /* height: 100vh; */
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
}

And added:

video.bg-videoo {
    max-width: 100vw;
}

Giving this result:

This is of course not full height of the Browser, but is the correct width while keeping aspect ratio of Video - what is your desired (width/height/etc)

---

Talk soon & have a wonderful day 🌝

Richard

[mw]

Thank you for your answer @Richard . I need the video to be fixed and to cover the whole body (100vh)

Now I found out that the behavior is down to position fixed, causing this problem in the mobile view. Using your code (or my code) with position fixed is causing this error. Without fixed positioning, everything works as expected.

Is there something that I need to know about the theme in order to work with fixed positioning? Cause I remember some issues in the past that I had with fixed positioning.

Would love to hear from you
Best, Markus