To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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 40 (40)
KetanKumar
Shopify Partner
36263 3609 11693

@Julianna @KayJackson 

yes, can you please just add customization video section 

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
goatlane
New Member
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
New Member
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
New Member
1 0 1

Hello, did anyone figure this out? 

KetanKumar
Shopify Partner
36263 3609 11693

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

KyaJ
New Member
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

Andreavr
Shopify Partner
5 0 1

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

 

KetanKumar
Shopify Partner
36263 3609 11693

@all 

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

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
theknowskin
New Member
1 0 0

Hi,

 

How did you fix this, your site looks great!

KyaJ
New Member
2 0 0
Hello, thank you! I added the Video Background App.
KetanKumar
Shopify Partner
36263 3609 11693

@all 

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
Fyous
New Member
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
36263 3609 11693

@Fyous 

can you please share issue image or video?

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
LukePlayhood
New Member
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. 

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
36263 3609 11693

@XtalS 

yes, please add code theme.liquie

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
simplict
New Member
1 0 0

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

KristinaLD
New Member
1 0 0

Hi @Julianna,

which paid theme did you choose? Thanks!