Looping Video With Text Overlay

New Member
2 0 0

Hey there,

I'm using the Debut theme, and I've been obsessed with trying to find a way to implement a mute looping video to my homepage. 

There is a section in the Debut theme called 'Image with text overlay, ' and it gives you the option to add a picture bar to your homepage and control its size on the page, and add text and a button to it if you wish. It's such a great tool, and I like that it's flexible and gives you options.

So I went to take a look at the HTML/CSS of that particular section, and I thought it would be relatively easy to DUPLICATE that section and REPLACE the image part with a video part, add that it must be mute and loop forever.

With Shopify's 20MB restriction, a good-quality video would be kind of hard to upload directly. So Youtube or Vimeo would need to be used. However, I would like to remove any traces of these platforms if I could. No pause and play button, no bar at the bottom, etc. just nothing but the video I made.

I would be so grateful if someone would help me with this. I could post the section's HTML code if you'd like to take a look at it.

Thanks for anyone's help in advance.

0 Likes
Excursionist
12 0 3

Hi,

 

Frustrating looking for similar solution, did you figured it out?

 

Have a great day!

 

Br,

Jesper Ahlbom

0 Likes
Shopify Partner
1908 320 403

Hi,
You can create custom section for that or you can also add attribute autoplay="autoplay" and loop="loop" it will auto loop your video if you have used video tag.

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
Excursionist
12 0 3

Big thanks for answering!

 

This was a step in the forward direction, I added the custom content section and linked it to youtube =)

I'm not the pro when it comes to the "edit code" section where i think i shall add the "video tagging" part, but do you think below is even possible?

 

My "would be nice to haves" with the video is

1. Full screen

2. Resposive depending on device (mobile/pc/tablet etc)

3. Autoplay and autoloop

4. No "youtube" text and playbuttons and stuff like that (see crossed in the picture)

 

let me know if you need password or any more info.

 

jbc.png

 

Best regards,

Jesper

0 Likes
Shopify Partner
1908 320 403

Send me your store url i will check, send password if protected by password.

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
Excursionist
12 0 3

Thanks, i just sent it to your email in your signature =) thanks!

0 Likes
Shopify Partner
1908 320 403

Thank you i will check and let you know

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
Excursionist
12 0 3

Thank you very much for your help and adjustments my friend!

 

The solution in the end was (for debut theme)

 

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;

}

}

 

5. It works

www.justbe.company

 

I'm very grateful for all your help out there in this forum.

 

Best regards,

Jesper Ahlbom

 

1 Like
Highlighted
Shopify Partner
1908 320 403

If helpful then please LIKE and ACCEPT solution so i can help other.

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
2 Likes
Shopify Expert
9765 86 1513

I'll add a little warning in here that you've opted to define a specific section in your CSS. eg: "#shopify-section-1555664398945". If you ever remove and add a new section this custom code will no longer apply. That could be exactly what you want but worth noting in case you wonder why it doesn't work later.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like