FROM CACHE - en_header

Looping Video With Text Overlay

Omar_Fahmy
New Member
3 0 1

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.

Replies 162 (162)
jesperahlbom
Excursionist
12 0 8

Hi,

 

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

 

Have a great day!

 

Br,

Jesper Ahlbom

Jasoliya
Shopify Expert
4522 586 1138

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.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
jesperahlbom
Excursionist
12 0 8

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

Jasoliya
Shopify Expert
4522 586 1138

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
jesperahlbom
Excursionist
12 0 8

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

Jasoliya
Shopify Expert
4522 586 1138

Thank you i will check and let you know

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
jesperahlbom
Excursionist
12 0 8

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

 

Jasoliya
Shopify Expert
4522 586 1138

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Jason
Shopify Expert
10915 192 2190

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
jesperahlbom
Excursionist
12 0 8

True! 😃

 


@Jason wrote:

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.


 

jesperahlbom
Excursionist
12 0 8

I can't find where I accept as solution?? but I'm happy to do it!

Oshki
New Member
2 0 0

Hello! I am using the Launch theme on shopify and I am having the same issue. I want text overlay to stay on the video once it autoplays and loops, but the text overlay disappears as soon as the video autoplays.

 

Oshki
New Member
2 0 0

I tried to code the same html as you did with the debut theme to successfully make this work but I can not seem to get it to work. 

Jasoliya
Shopify Expert
4522 586 1138

Send your store URL

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
101atx
New Member
1 0 0

I am having the exact same issue, but for the life of me cannot get the video to go to the edges. I have everything else. 

 

I created a custom HTML section on the site and input

 

<div style="padding: 50% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/318291897?autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;backgrou..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>

 

but cant erase the borders!

Jasoliya
Shopify Expert
4522 586 1138

You have used i-frame for video, i given solution with video html tag, that support auto play,loop and all.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
GV1
Tourist
16 0 1

I am having issues with step #4. After Step 3, I cannot get the video to center itself and when i paste the code from step 4 it just shows the very same text I pasted at the top of my store.

 

Please help! Thanks in advance.

Jasoliya
Shopify Expert
4522 586 1138

Send your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4522 586 1138

Add this css in asset->theme.scss file at bottom:

.video-background{    transform: initial;    width: 100%;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here