Video on Debut Homepage

Solved
BimbleDesign
Tourist
10 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

0 Likes
PetrusB22
Shopify Partner
53 9 14

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
10 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 14

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
10 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

0 Likes
decli
Excursionist
18 2 6

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

0 Likes