How to create text overlay and button on mp4 video banner?

Store Design
1

Hello,

I’ve been trying to find a solution on this board but unfortunately couldn’t find the answer.

I have a 10s video to make it as a banner. I converted the file to gif and used IMAGE BANNER on the Dawn theme, but the quality is not good. I found an answer on this board on how to use the custom liquid. I used this code and the video is now there as what I wanted.

<div class="ov <p>erlay"></p> </div> <p>However, I do not know how to do overlay text and create a button on it. I can do this using IMAGE BANNER (with the gif), but now with an mp4 file in custom liquid, I don’t know how to do it.</p> <p>Please if you can help me with this.</p> <p>Thanks in advance.</p>
2

@AK313

If you are comfortable with the code this should be a relatively easy fix for you.

You could put in your “video” code in place of this:

{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}

Within the “sections/image-banner.liquid” file. That should load the video whenever you do not select an image for use with the image banner section.

Ideally you would add an input for capturing the video URL and a checkbox for use with toggling it to use the video or an image to the section so that you can modify the video and whether or not it is used from the Theme Editor itself instead of needing to go into the code each time you want to make a modification like that.

Hope that helps!

3

Thanks @RobDukarski I will try this. Meaning that with this code I can put a video using the IMAGE BANNER. Currently I can only use photos or gif files.

4

@AK313

As long as the video can be played in that capacity it should work. I know some video content needs to be embedded with an “iframe” and others will not load the content outside of a specific request with them as the referring party.

If you do just use that code you have then you should note that to change the video you would need to go back into the code each time. Also remember no image can be selected within the section in order for that to work.

Hope that helps!

5

Thank you so much. Appreciate your help.

6

@RobDukarski thanks again for your help. The video is now works perfectly in desktop, but I noticed there is a space between the video and the text.

Please can you or anyone else reading this to help me thanks.

mobile.png
mobile.png935×686 68.1 KB

7

I can’t seem to find the code you’re referring to. Maybe it has been updated? Do you know what it might be now?

For reference, I’m talking about this: {{ ‘lifestyle-2’ | placeholder_svg_tag: ‘placeholder-svg’ }}

8

Hi everyone,

Very helpful solution but unfortunately I wouldn’t be able to apply to my theme which is out of the sandbox Flex theme, anyone know how to apply this to the Flex theme?

Best wishes,

Maggie