Looping Video With Text Overlay

Highlighted
New Member
2 0 0

Hi 

Which code exactly worked for the Narrative theme?

Thanks,

Sascha

0 Likes
Highlighted
Tourist
8 0 2

The steps from page 1 of this thread:

1. Upload your video to files in Shopify (home - settings - files - upload)

2. Add custom content (edit homepage - add section - custom content - add content - custom html

3. Then we added the following html code

<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="YOUR URL TO THE VIDEO FROM STEP 1" playsinline="" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="YOUR URL TO THE VIDEO FROM STEP 1">
</source></video>

 

4. Then we added below CSS code in shopify (Sales Channels - Themes - Actions - Edit Code - theme.scss.liquid

// Header Video CSS

.video-background {
width: 100%;
height: auto;
left: 0;
top: 0;
}

.template-index #shopify-section-1555664398945 .page-width {max-width: initial !important;}
.template-index .main-content{padding-top: 28px;}

@media only screen and (min-width: 750px){

#shopify-section-1551278267809 .section-header {

margin-top: 20px;

}

}

 

Here is my store I am working on: https://www.thesteelbee.com/?_ab=0&_fd=0&_sc=1

Highlighted
New Member
5 0 0

I have this same issue - are you able to help? We would like our Narrative Video to autplay on mobile, for now all we can see is our logo as a placeholder? Password is "thespartner". Thanks.

 

 

0 Likes
Highlighted
Shopify Expert
3899 559 935

Send me your store url 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
5 0 0
www.thespartner.com, password "thespartner"
0 Likes
Highlighted
Tourist
8 0 2

can you help me with learning how to unmute my looping video at the top banner if a user turns their volume up?

store is https://www.thesteelbee.com/ 

0 Likes
Highlighted
Shopify Expert
3899 559 935

Add this video code:

<video class="video-background" loop=""  no-controls="" autoplay="" src="https://cdn.shopify.com/s/files/1/0428/2086/2101/files/final_subtitles2_480.mp4?v=1603161298" playsinline="" style="transform: scale(1.2, 1.28);">
<source type="video/mp4" src="https://cdn.shopify.com/s/files/1/0428/2086/2101/files/final_subtitles2_480.mp4?v=1603161298">
</video>

Also if you want to play and stop option then remove "no-controls" from above code.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
5 0 0

Hi - sorry, can you even go a bit more basic? No idea how to do this...

0 Likes
Highlighted
Shopify Expert
3899 559 935

Change your <video> tag code to my given code. where from you added it using theme editor.

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
9 0 1

Hi @Jasoliya ,

 

thanks a lot for hekping us solving the issue , really appreciated.

In my case, the video works great but I want a bit more than implementing a simple text as an overlay. I would like to add 3 things :

- colored overlay with transparency % to better read the text

- integrate a call to action button

- integrate a klaviyo form to get subscribers

 

I tried to do it but the code I added is pushed below the video

You can see the page I'm working on here : https://www.syewatches.com/pages/landing

 

Thanks for your help 

0 Likes