Video on Debut Homepage

Solved
BimbleDesign
Tourist
11 0 2

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)

Accepted Solutions
PetrusB22
Shopify Partner
53 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)
PetrusB22
Shopify Partner
53 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.

BimbleDesign
Tourist
11 0 2

@PetrusB22  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

PetrusB22
Shopify Partner
53 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.

BimbleDesign
Tourist
11 0 2

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 11

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

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

decli
Excursionist
25 2 11
Have you checked it in "live" view? Sometimes it doesn't look active when
you're in the building mode.
Robin813
Tourist
6 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 11
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
6 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 11
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
6 0 2

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

ReinhardFuchs
New Member
2 0 0

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

boylejake
New Member
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.

THMP12345
Tourist
15 0 1

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
New Member
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?