[Resolved] Fullscreen elements video

[Marcel]

Hi there,

I’ve got a video via Elements on the homepage but I’d like it to be fullscreen independent of the device. Something like on this page: https://www.rotary.org

Would that be possible?

Thanks,
Marcel Mooij

[David]

Hi there,

the Header Element can be set to full height – but only if it is set to merged with the Site Header.

You can apply some CSS to do it:

/* Desktop */
.full-height-hero {
    min-height: calc(100vh - 100px);
}
/* Mobile */
@media (max-width: 768px) {
    .full-height-hero {
        min-height: calc(100vh - 60px);
    }
}

Adjust the -100px and the -60px to match the height of your Site header.

Then add the Element Class of full-height-hero to your header element.

[Marcel]

Thanks David, but on my site I’m using the Mega Menu above the header element and I think these can’t / should be merged? So than it’s not possible?

[David]

The CSS I provided should work with the mega menu or the standard navigation.
You don’t have to set the Site Header to merged for it to work.

[Marcel]

Ah ok, I see how it is working! But I’ve one question: on the rotary-site the video resizes when changing the screen-size so that it’s always fullscreen. Is that also possible? Now, when I resize the window to make it smaller the video becomes a lot smaller in height.

Thx!

[David]

Edited the code above ( i was being stupid lol )

[Marcel]

Yes! That did it, thx man 😉

[David]

You’re welcome

[Author]

Posts