[Resolved] Video in header element

Home Forums Support Video in header element

  • This topic has 11 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1331124
    ch1800

    Hi there,

    A couple of questions about video headers:

    – How to use a video instead of a picture in this homepage header element?
    – Is the process similar as for page hero here:
    https://docs.generatepress.com/article/page-hero-background-video/
    – do I need to host the video or can use a youtube link?

    Thanks.

    #1331175
    David
    Staff
    Customer Support

    Hi there,

    that doc is the correct method for adding videos.
    The video has to be self hosted

    #1331443
    ch1800

    Thanks, just testing but not very successful so far…
    Is there a way to make the video I added there full width responsive?
    I kept the element’s overlay grey color just for reference.

    #1331461
    David
    Staff
    Customer Support

    Try changing this CSS:

    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }

    for

    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
        height: 100vh;
    }
    #1331473
    ch1800

    On laptop I get an empty space at right and on resizing to smaller screens the video is not responsive: it just keeps its height but the width is cut.

    #1331852
    Leo
    Staff
    Customer Support

    Can you try this instead:

    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
        width: 100%;
    }
    #1332003
    ch1800

    This one works great on desktop but when resizing for smaller screens it gets an empty space below but keeps responsiveness. I maybe need to adjust the element’s settings?

    #1332244
    David
    Staff
    Customer Support

    Disable the full height option in the header element and give the element some % top and bottom padding. Try 28% in each. This will keep the height responsive.

    #1332331
    ch1800

    By “full height” you mean the option “full screen”, right?
    I did that but with those values I was getting an empty space below in some screen sizes.

    I tested with different values and found that what fits best is 28% for top and 14% for bottom paddings. What do you think?

    Also, I see that there is still an Offset Site Header Height left over from previous settings, with values of 105px for desktop and 70px for mobile. Should I leave it as is?

    #1332362
    David
    Staff
    Customer Support

    If you set the Offset to 0.
    Then 28% top and 28% bottom ( ie a Total of 56% ) should work.

    #1332382
    ch1800

    Great, you are right, that works fine now.
    Many thanks for your precious help guys!

    #1332386
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.