Solved

Can I select an uploaded MP4 for the Debut homepage on Shopify?

Aneby
Excursionist
20 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)
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)