Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Video on Debut Homepage

Solved

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

Aneby
Excursionist
21 0 3

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

Accepted Solution (1)
PieterB22
Shopify Partner
55 9 15

This is an 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.

View solution in original post

Replies 17 (17)

PieterB22
Shopify Partner
55 9 15

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

@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
Shopify Partner
55 9 15

This is an 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
Excursionist
21 0 3

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
Excursionist
25 2 23

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

 

 

screenshot-wrist-ability.myshopify.com-2021.07.20-11_30_25.pngscreenshot-wrist-ability.myshopify.com-2021.07.20-11_29_57.png

Robin813
Tourist
7 0 2

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

decli
Excursionist
25 2 23
Have you checked it in "live" view? Sometimes it doesn't look active when
you're in the building mode.
Robin813
Tourist
7 0 2

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

decli
Excursionist
25 2 23
Ahhh, then there's something wrong. Go back through everything step by
step, esp the coding.... I'm just a regular shop owner.
Robin813
Tourist
7 0 2

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
Excursionist
25 2 23
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
Tourist
7 0 2

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

THMP12345
Excursionist
20 0 3

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

Joshua33
Visitor
1 0 0

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
Visitor
2 0 0

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

boylejake
Visitor
3 0 0

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.