What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Add video as homepage header instead of image

Add video as homepage header instead of image

Julianna
Tourist
4 0 4

I want to make the header on my home page a short video loop on repeat. Currently I use the Live theme and I only see an option for an image header. How can I switch that to a video, but only for the home page? When a site visitor is on the other pages I want it to be an image as the header behind the main menu

Replies 41 (41)

KetanKumar
Shopify Partner
37433 3664 12119

Hello, @Julianna 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Julianna
Tourist
4 0 4
KetanKumar
Shopify Partner
37433 3664 12119

@Julianna 

Thanks for url

see the attachment

Demo-Store _ Customize _ Debut _ Shopify.png

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Julianna
Tourist
4 0 4

Thanks @KetanKumar ! I'm not looking to add a video to the page, I want to make the banner/header a video not a static image 

KetanKumar
Shopify Partner
37433 3664 12119

@Julianna 

It can be done by doing some code customization. Please take the help of a developer and hire  Shopify Expert or me

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
ashtonbaran
Visitor
2 0 1

Hi Julianna,

I'm trying to do the same thing for my shopify site.  I clicked on the link you provided and noticed the video is in the header now.  What was your solution to this?  

Thank you,

Ashton

KetanKumar
Shopify Partner
37433 3664 12119

Hello, @ashtonbaran 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
snoopcrunch
Visitor
1 0 0
KetanKumar
Shopify Partner
37433 3664 12119

@snoopcrunch 

Thanks for url

sorry, but the store is password protect. can you please share us.

also please mansion your issue so i can help you.

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
IonCreative
Tourist
6 0 0

@julianna751 @snoopcrunch 

Your site looks great! Could you share how you were able to do this?

KayJackson
Tourist
5 0 1

Hey,

I'm trying to do the same thing for my shopify site.  I clicked on the link you provided and noticed the video is in the header now.  What was your solution to this?  

Thank you,

Kay

KetanKumar
Shopify Partner
37433 3664 12119

Hello, @KayJackson 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
KayJackson
Tourist
5 0 1
https://humblelyfestyle.com

Password: kayjack1020
KetanKumar
Shopify Partner
37433 3664 12119

@KayJackson 

Thanks for it 

can you please check your customization theme setting you have easy to add this video

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
KayJackson
Tourist
5 0 1

I see what your saying but I’m trying to put a video or gif in the corner at the top as the header 

KetanKumar
Shopify Partner
37433 3664 12119

@KayJackson 

sorry i can't see any video 

KetanKumar_0-1606072419783.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
KayJackson
Tourist
5 0 1

Because I don’t know how to put it on there lol, that’s what I’m asking. How do I put it in the corner where the image is or can I even do that ? 

Julianna
Tourist
4 0 4
I chose a paid theme that allowed for video headers
KetanKumar
Shopify Partner
37433 3664 12119

@Julianna @KayJackson 

yes, can you please just add customization video section 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
KristinaLD
Visitor
1 0 0

Hi @Julianna,

which paid theme did you choose? Thanks!

 

metalmo
Tourist
4 0 1

I dug through the site code and it looks like they are using the "Motion" theme, which is quite expensive. 

Andreavr
Shopify Partner
7 0 1

Looks like they ended up using the Motion theme which has more video related theme code built in.

 

KetanKumar
Shopify Partner
37433 3664 12119

@all 

can you please all more details how do you have like this 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Maxim247
Tourist
11 0 2

this dosen't come up on my store customisation section, can you help? my store url is millionballers.com

theknowskin
Visitor
1 0 0

Hi,

 

How did you fix this, your site looks great!

KyaJ
Visitor
2 0 0
Hello, thank you! I added the Video Background App.
KetanKumar
Shopify Partner
37433 3664 12119

@all 

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Fyous
Visitor
1 0 1

I've tried to custom code the video header, but not getting much luck on mobile, seems the display properties are creating issues in certain responsive sizes.

 

My site: fyous.com

KetanKumar
Shopify Partner
37433 3664 12119

@Fyous 

can you please share issue image or video?

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Miopatron
Excursionist
10 0 4

Hello brother, can you help me with my video hero banner in Shopify Brooklyn theme. I have ad it but the sizes on the desktop and phone are to big. I also have no css

XtalS
Tourist
8 0 4

@KetanKumar

Thanks for the code. but where to put it?

KetanKumar
Shopify Partner
37433 3664 12119

@XtalS 

yes, please add code theme.liquie

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
simplict
Visitor
1 0 0

Hey Ketan!! I'm also using the brooklyn theme, I was wondering if you could send me the code as well!!

KayJackson
Tourist
5 0 1

Hey, how are you ? 

Can I share my URL as well for the same problem ? 

goatlane
Visitor
2 0 0

Hi Ketan,

I would also like to get help to add a video to my shopify. www.goatlane.com 

Can you guide me?

Best

Gustav

ashtonbaran
Visitor
2 0 1

I think what everyone here is asking is... without paying for a theme, how can you add a video into the header?  There has to be some simple code for the header that allows videos.  My knowledge is limited, but I do know you have to create a container of some sort that has width, height, and position properties.  How that is done and where you add it is what we are looking for an answer to.  Please help.

 

Thank you,

Ashton

CaliforniaSuper
Visitor
1 0 1

Hello, did anyone figure this out? 

KetanKumar
Shopify Partner
37433 3664 12119

@CaliforniaSuper 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
KyaJ
Visitor
2 0 0

Hello. I can add a video but it is really small. I would like the video to fill the same space as the present image. How can I do that? My site is rainbowmekids.com

LukePlayhood
Visitor
3 0 0

Hi, Goatlane, able to share how you added the video to the top of the page and it is on autoplay pls. 

Not applicable

Hi there,

 

Do you have solve the issues?? if still the issue not resolve then i recommend you to read for this article: How to add Add video as homepage header instead of image