[Resolved] Fullscreen elements video

Home Forums Support Fullscreen elements video

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1019523
    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

    #1019753
    David
    Staff
    Customer Support

    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.

    #1023335
    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?

    #1023343
    David
    Staff
    Customer Support

    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.

    #1023480
    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!

    #1023535
    David
    Staff
    Customer Support

    Edited the code above ( i was being stupid lol )

    #1025365
    Marcel

    Yes! That did it, thx man 😉

    #1025563
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.