Looping Video With Text Overlay

Highlighted
Tourist
16 0 1

JOIN US PAGE

<div style="text-align: center;"><span class="video_text" style="color: #ffffff;"><span style="background-color: #000000;">AMERICAN ETEEN is passionate about each and every one of our customers so we love to give back to those who have shown support to us! To have a chance at winning free products and becoming a sponsored Influencer; 1. Create a TikTok that showcases you on our website picking out your favorite products from us 2. Tag our TikTok account @Amteen for us to see!</span> </span></div>
<span style="color: #ffffff;"><video class="video-background" loop="loop" muted="" no-controls="" autoplay="autoplay" src="https://cdn.shopify.com/s/files/1/0285/7248/3723/files/AMETEEN_HOMEPAGE.mp4?282" style="transform: scale(1.27563, 1.27563);"></video></span>

 

HOME PAGE

<span class="video_text">WELCOME TO AMERICAN ETEEN</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>

0 Likes
Highlighted
Shopify Expert
2943 504 678

Remove css for '.video_text' that i given and add this new

.video-background{padding-top: 55px;}
.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 25px;padding: 10px;}
@media only screen and (max-width: 767px) {
    .video_text{top: 5%;font-size: 12px;}
}
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

Now it is centered, but it does not look good on mobile still. What would you suggest i do to make the image and text appear nicely on the Join us page? Capture.PNG12.PNG

0 Likes
Highlighted
Tourist
16 0 1

And now the video is not fitting on mobile...  

13.PNG

0 Likes
Highlighted
Shopify Expert
2943 504 678

You have changed video tag code structure on join page that's why not working as p[er my css. 

and use big video you video size is too small that cant fit.

Add me as staff i will check

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

Check your gmail

0 Likes
Highlighted
New Member
1 0 0

Hi im having the same issue but when i try uploading the video it says that the file type is not supported how can I fix this
thanks

0 Likes
Highlighted
Shopify Expert
2943 504 678

Send me 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
0 Likes
Highlighted
New Member
1 0 0

Hi 

I followed your above instructions and they did not work. I also looked at your below website, where you day this works, the website is not live.... Can you please advise?

Thanks

Cara

0 Likes