How can I display my uploaded MP4 on the Debut homepage?

[Aneby]

Hi,

Is there a way I can select the MP4 that I uploaded to Shopify (via settings>files>upload file) on the Debut homepage?

As it stands I have embedded a YouTube vid - but it feels a tad unprofessional to have YouTube logos plastered everywhere (and recommended videos at the end etc).

Any help will be much appreciated. 

Link: www.bimbledesign.com
Password: thankyouforyourhelp

Cheers
Ryan

[PieterB22]

Hi Ryan,

You can try this:

In your Shopify customizer, add a new custom section. Then remove the default options which should be an image and talk about your brand block. Then click on add content and choose custom HTML. Once it gives you the option to add text, paste the following code:

<video controls="controls" src="{your-video-url}" type="video/mp4" width="800" height="600">"Any text you might want to add."</video>

Just replace the {your-video-url} with the link to the video that you uploaded to Shopify. Adjust the height and width that you would like the video to be and then you can add text between the <video></video> tags or remove it.

[Aneby]

@PieterB22  that was much easier than I anticipated - you're a star! Thank you.

I'm being greedy now, but is there way to add some code for the following:

1) auto-fit for all screen sizes (I adjusted the width for desktop, but when I checked on mobile, 60% of the video was missing).

2) auto-play when a user scrolls past?

Thanks again!
Ryan

[PieterB22 · Accepted solution]

You're welcome.

Also... this should fix your problem for both...

<script>
window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);
function videoScroll() {
  if ( document.querySelectorAll('video[autoplay]').length > 0) {
    var windowHeight = window.innerHeight,
        videoEl = document.querySelectorAll('video[autoplay]');
    for (var i = 0; i < videoEl.length; i++) {
      var thisVideoEl = videoEl[i],
          videoHeight = thisVideoEl.clientHeight,
          videoClientRect = thisVideoEl.getBoundingClientRect().top;
      if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
        thisVideoEl.play();
      } else {
        thisVideoEl.pause();
      }
    }
  }
}
</script>
<video autoplay muted loop controls="controls" src="{your-video}" type="video/mp4" width="100%" height="600">"Any text you might want to add."</video>

Just replace the code you added to the custom HTML block with the code above, add your video url/link again and you should be on your way. You can also choose to mute the video or not. Just remove the muted text inside the <video> tag in you don't want to mute the video.

The video will now play as soon as it reaches the center of the screen and stop playing as soon as it exits the screen.

[Aneby]

Ahh works perfectly - you legend! 🙂 

I removed the muted text as you suggested and also updated height to 100% (from 600) as it was looking a bit 'tall' on mobile. 

Really can't thank you enough, though. I've seen thread after thread trying to find this exact fix. I'll send them this way.

Cheers
Ryan

[decli]

HI!  
I'm using Debut. 
I created a duplicate theme.

I created a custom section.  
  Added the code to the section to it from your post. 
  Inserted the shopify link for my mp4 file

Saved. 

Go to Customize theme
Open the duplicate theme. 
Add section - custom content

And it shows the "custom content" with talk about brand, add photo. 

I feel like I'm overlooking something incredibly simple. 
How do I get the "custom content" section to reflect the new coding?

Thank you for your guidance. 

Decli

[Robin813]

Your info and coding worked out perfectly, except the video won't play. Any suggestions? 

[decli]

Have you checked it in "live" view? Sometimes it doesn't look active when
you're in the building mode.

[Robin813]

I am creating it on a copy but even when I preview, it is just a black video that won't play. 

[decli]

Ahhh, then there's something wrong. Go back through everything step by
step, esp the coding.... I'm just a regular shop owner.

[Robin813]

Same here, and your page looks great by the way! Did you use the code provided in this thread? Or something else? I just can't seem to view the video, but the code is there with my video link that is stored in the files section. So frustrating!

[decli]

Ohhh! Please do a community search ... I posted a solution because I
couldn't get the one provided to work. It's totally different!

Here you go:
https://community.shopify.com/c/shopify-design/how-to-add-a-video-background-to-the-homepage-of-shop...

[Robin813]

Thanks so much! I just found it and will check it out now!!!

[THMP12345]

Hallo, ich habe eine Frage zu deiner Lösung. Ich weiß leider nicht wo ich den html Code einfügen soll. Ich finde leider nicht die richtige Stelle wo ich meine Startseite bearbeiten kann. 
Danke

[decli]

https://community.shopify.com/c/shopify-design/how-to-add-a-video-background-to-the-homepage-of-shop...

[Joshua33]

The inline scripting for the video is awesom, and everything finally works for me, however, there seems to be a lot of padding on mobile, is there a fix for this?

[ReinhardFuchs]

My YOUTUBE Video needs a replacement  of an old shoo advert. how can I get rid of that?

[boylejake]

I don't know a lot about MP4 files from Debut, considering I don't use it. But with the site I use, https://www.fastreel.com/montage-maker-online.html, it's pretty simple. I make the video, then download it on the computer. No logos or something like that. Then I think I can upload it anywhere. You should try to use the code given or simply use another platform. If you do, however, find the solution, please let us know. From what I've heard in the comments, you're not the only one stuck with this problem.