[Support request] Text Overlay on background video Page Hero

[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/

[Leo]

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?

[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?

[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?

[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.

[David]

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?

[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.

[David]

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.

[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.

[Tom]

Hi there,

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

Let me know 🙂

[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?

[David]

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

[ELM]

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

[David]

Hi there,

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

[Author]

Posts