Looping Video With Text Overlay

Tourist
16 0 1

How do I get the text to go over the video on the "Join Us" Page?

0 Likes
Highlighted
Tourist
16 0 1

Also, on the home page. Thank you in advance!

0 Likes
Highlighted
Shopify Expert
2932 499 674

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
16 0 1
Eboy21.myshopify.com
0 Likes
Highlighted
Shopify Expert
2932 499 674

Add this code just above <video> tag

 

 <span class="video_text">Your text goes here</span>

So it look like:

 

 

<span class="video_text">Your text goes here</span>
<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="https://cdn.shopify.com/s/files/1/0285/7248/3723/files/AMETEEN_HOMEPAGE.mp4?282" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="https://cdn.shopify.com/s/files/1/0285/7248/3723/files/AMETEEN_HOMEPAGE.mp4?282">
</video>

Now add this css in asset->theme.scss file

.video_text{color: white; position: absolute; z-index: 9999; left: 50%; top: 50%; font-size: 25px;}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
16 0 1

Thank you very much for your assistance.

 

How do I edit the text now? Thank you in advance.

0 Likes
Highlighted
Shopify Expert
2932 499 674

I already mentioned in this code:

<span class="video_text">Your text goes here</span>

Change this text "Your text goes here"

Also i can see you have already text on video at left bottom, if you dont want to see this text then add this css:

.medium-up--text-left{display:none;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
16 0 1

Thank you very much! I am wondering if i can edit the font and size of this font using some code? Thank you.

0 Likes
Highlighted
Tourist
16 0 1

The "join us" page text is not being centered, any idea why?

0 Likes
Highlighted
Tourist
16 0 1

*Not being centers and not filling the picture correctly - mobile version extends well below the page... And it covers up the header.

0 Likes