mp4 video on Debut theme homepage without YouTube link

Solved
decli
Excursionist
18 2 6

Hi!

I'm trying to add a mp4 to my home page.  I followed the instructions from a community link - but nothing appears. 

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. 

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

 

--------------------------------

Another community reference advised to add a rich text section and add html ... but my rich text box doesn't have an html option. 

Any help you can provide would be deeply appreciated. 

Thank you!

 

screenshot-wrist-ability.myshopify.com-2021.07.21-11_10_26.pngscreenshot-wrist-ability.myshopify.com-2021.07.20-11_30_25.pngscreenshot-wrist-ability.myshopify.com-2021.07.21-11_11_13.png

 

KetanKumar
Shopify Partner
22496 2279 8378

@decli 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
decli
Excursionist
18 2 6
0 Likes
decli
Excursionist
18 2 6

Hi @KetanKumar 

Here is the website:  https:// wristability.com

I have the code entered in a duplicate (not active) theme... awaiting successful video load)

 

Thank you,

Decli

KetanKumar
Shopify Partner
22496 2279 8378

@decli 

thanks for update you have fixed issue?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
decli
Excursionist
18 2 6

No.  I'm awaiting your solution. Please help. 

"Please share your site URL, I will check out the issue and provide you a solution here."

 

0 Likes
KetanKumar
Shopify Partner
22496 2279 8378

@decli 

you have like this?

https://codepen.io/adrianparr/pen/QxMvdj

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
decli
Excursionist
18 2 6

No.  when I add a special section, it does not have a html option. Kindly re-read the initial help request.  I'd love to be able to insert a mp4 on the home page with your guidance.

0 Likes
KetanKumar
Shopify Partner
22496 2279 8378

@decli 

yes it possible to customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
decli
Excursionist
18 2 6

LOL... yes, I know it is possible to customize code.  That's what I'm trying to do and not being successful.  I'd appreciate help in determining why the code isn't working, or another solution where I can load a mp4 onto the home page without HTML - as I don't have that option.

0 Likes