[Support request] Text Overlay on background video Page Hero

Home Forums Support Text Overlay on background video Page Hero

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1050928
    Steig

    Hello,

    I believe I’ve followed your instructions on setting up the background video, but I’d like to move the text from the bottom of the video to the center or even right of center. Your instructions seem to indicate to use the padding adjustments to accomplish this, but those controls only become exposed if a static background image is uploaded.

    How can I successfully control the text overlay? A great example is https://www.trekbikes.com/us/en_US/

    #1050962
    Leo
    Staff

    Hi there,

    The padding options should appear by default with or without the background images:
    https://www.screencast.com/t/BSmWXIa7

    Can you double check?

    #1050983
    Steig

    I saw those and thought they were impacting the size of the video. I.e. make the video more narrow. In fact I have the first one set to 30% and it seemed to work. How do I move the text around and control the viewing height of the video independently of each other?

    #1051016
    Steig

    Also, the video doesn’t loop forever. It times out after a while, but I do have loop set. Any idea what I can do to make it loop forever?

    #1051017
    Steig

    I’ve been playing with the padding with some interesting results. Using left/right padding, I can move the text to the left & right. But the top bottom padding seems to make the viewing size of the background video change. And as it changes, I believe the text stays put. So if I make the video height larger, then the text appears to be horizontally centered.

    #1051250
    David
    Staff

    Hi there,

    The Header Element container height is controlled by a. the top / bottom padding and the height of the content ( not the video ). The video is absolutely positioned to fill the header element.

    If you put equal top and bottom padding then the content will be centred vertically.
    Left and right padding can be used to move the content position to either side or restrict the width of the content.

    Where exactly do you want the content positioned?

    #1051399
    Steig

    Our video is in post processing. The video you are seeing is simply filler so I can move the website along. I’ll play around with the settings per your direction.

    Since the video fills the header element, can I control the size of the header element? In the customizer, I see more header padding controls under header layout, but those don’t seem to be impacting the video.

    #1051410
    David
    Staff

    The padding controls in Customizer > Layout > Header only apply to the Site Header NOT the Header Element. You need to edit the Header Element and use the padding controls it provides.

    #1051449
    Steig

    Alright, I’m assuming we are right back into the controls where we started. Elements/Edit Element/Header. We established the Page Hero padding controls the layout of the text overlay. the Site Header doesn’t have any padding controls (I didn’t want to merge the header with content).

    I do see a few other controls if I upload an background image, but that would cover up the background video.

    #1051667
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is the padding method not working for you? If so, what’s the exact issue you’re running into?

    Let me know 🙂

    #1051686
    Steig

    Perhaps I’m not understanding. I’m assuming that two separate controls exist. One for the background video and the other for the text overlay. I guessing at this point its all one set of controls, which clearly I don’t know how to manipulate.

    Our video footage is 1080p at a 16:9 aspect ratio. When the video is shown edge to edge on the screen, it’s too tall and eats up too much above the fold screen real estate. So I wanted to make it more narrow. Instead of using pixels, I changed to percentages and set the top padding to 25%. That seemed to make the video background more narrow. But then if I’m to use the same padding controls to move the text around on the screen, I just get lost. If I change top & bottom padding to move the text to the middle, it just causes the background video to use of more pixels.

    How can I keep the video footage more narrow and move the text overlay around as needed on top of it?

    #1051834
    David
    Staff

    Where exactly on the header do you want the text overlay positioned?

    #1219953
    ELM

    I am wanting the test on the far right of the hero page the button included.

    #1220555
    David
    Staff

    Hi there,

    could you raise a new topic where you can share a link to your site

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