Looping Video With Text Overlay

[Omar_Fahmy]

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.

[jesperahlbom]

Hi,

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

Have a great day!

Br,

Jesper Ahlbom

[Jasoliya]

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.

[jesperahlbom]

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.

Best regards,

Jesper

[Jasoliya]

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

[jesperahlbom]

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

[Jasoliya]

Thank you i will check and let you know

[jesperahlbom]

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]

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

[Jason]

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]

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]

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

[Oshki]

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]

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]

Send your store URL

[101atx]

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]

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

[GV1]

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]

Send your store url

[Jasoliya]

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

.video-background{    transform: initial;    width: 100%;}