Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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.
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.
@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
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.
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
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
Your info and coding worked out perfectly, except the video won't play. Any suggestions?
I am creating it on a copy but even when I preview, it is just a black video that won't play.
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!
Thanks so much! I just found it and will check it out now!!!
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
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?
My YOUTUBE Video needs a replacement of an old shoo advert. how can I get rid of that?
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024