Solved

mp4 video on Debut theme homepage without YouTube link

decli
Excursionist
25 2 22

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

 

Accepted Solution (1)
decli
Excursionist
25 2 22

This is an accepted solution.

"sorry but i can't see any video at home pege"

Ummm, correct.  This IS the exact issue, @KetanKumar 
For some reason, I'm not able to convey the problem in a manner for you to understand/assist. 
itsnotworking.gif

 

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
36839 3635 11972

@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
25 2 22
decli
Excursionist
25 2 22

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
36839 3635 11972

@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
decli
Excursionist
25 2 22

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

 

KetanKumar
Shopify Partner
36839 3635 11972

@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
decli
Excursionist
25 2 22

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.

KetanKumar
Shopify Partner
36839 3635 11972

@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
25 2 22

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.

KetanKumar
Shopify Partner
36839 3635 11972

@decli 

sorry but i can't see any video at home pege

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
25 2 22

This is an accepted solution.

"sorry but i can't see any video at home pege"

Ummm, correct.  This IS the exact issue, @KetanKumar 
For some reason, I'm not able to convey the problem in a manner for you to understand/assist. 
itsnotworking.gif

 

KetanKumar
Shopify Partner
36839 3635 11972

@decli 

oh sorry for that 

please show me what's error?

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
25 2 22

It's been resolved. 

There is no longer an issue. 

KetanKumar
Shopify Partner
36839 3635 11972

@decli 

great thanks for update.

 

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
Jules10
Visitor
1 0 0

Hi there, 

Please can you confirm what you did to resolve this issue?

Shopify are being very unhelpful on this subject 😞

decli
Excursionist
25 2 22

Hi Jules,

  I found Shopify to be less than helpful with this issue... did research and found this as a great solution!

https://community.shopify.com/c/shopify-design/how-to-add-a-video-background-to-the-homepage-of-shop...

I hope it works for you, too!

DeAnne