Intro Video Mobile

[Lukasmuellner]

Hi,

My client wants to utilise a video as intro:

https://eldineheep.com

It works perfectly fine on desktop (1920 × 1080) but the mobile version shows the portrait MP4 (1080 × 1920) with a small white bar on top.

The white bar only occurs on iPhones (I got an iPhone X running iOS15.3.1) — on Android devices it’s all good.

Could you take a quick look into this?

Thank you very much!

Lukas

[Richard]

Dear Lukas

@Lukasmuellner

The White bar at the top is the space defined for the Navbar (menu-bar):

---

Best

Richard

[Lukasmuellner]

Hey @Richard, thank you for your feedback.

Is there any option to ignore the navbar space whenever an intro video / intro pic is set for the mobile version? It does look odd, I think.

Best,
Lukas

[Lukasmuellner]

@Lukasmuellner Hi Richard, could you let me know if you guys can think of a workaround for this?

Thank you,
Lukas

[Lukasmuellner]

Hey guys, I’d really appreciate a response — thank you 🙂

[Richard]

Dear Lukas

@Lukasmuellner

Sorry for delay, let's do this! 💥

The following CSS seems to be responsible for the height of the video region:

.intro .mediawrap.w100 .media {
    width: 100%;
    height: 100%;
}

Changing the height to 100vh gives the following result:

.intro .mediawrap.w100 .media {
    width: 100%;
    height: 100vh !important;
}

The Above Custom CSS Should be applied within:

Lay Options > Custom CSS & HTML > Custom CSS for Mobile Version >

---

Let me know if we need more refining Lukas, thank you for your patience this past week, best wishes ✨

Richard

[Lukasmuellner]

Hey @Richard Thank you so much — works perfectly fine!

Thanks again,
Lukas

[Richard]

@Lukasmuellner

Thank you too Lukas!! have a wonderful day! ⭐️