how to add a background video to collection banner

how to add a background video to collection banner

momsabhiruchi
Shopify Partner
37 1 3

hi folks, i want to add a background video to the collection banner . can any one help me out with that. here are my store details and the reference website details.

 

my store details :

https://moortikar.myshopify.com/

password: rtebra

 

reference website:

https://theartarium.com/collections/luxury-home-decor

 

i want to display respective collection names when we enter into each collection.

looking forward to the solution

thanks in advance

Replies 4 (4)

Shadab_dev
Shopify Partner
869 48 87

There's two ways you can do this. Either with css to add a background video on the collection. The other is to add an extra option to add video to your collection schema and then render that through html and css. This way you can choose either of the one image or video.

 

Please share the video link you want to add.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
MurraysBoutique
Visitor
2 0 0

Hi Shadab, 

 

I want to add a video over top of a banner image. I can achieve this in either an overlay, or I can create a video by editing in a background and a vector video (animation) over top of my background so I just have to import or add the video. I tried this with video banner insert but I lack controls to resize. My image is either 8000x2000 or 4000x1000 and this translate well to desktop (I can move this to a split view on my monitor) or over to mobile. I need to keep that aspect ratio as my page layout fits well with that. 

Shadab_dev
Shopify Partner
869 48 87

Hi @MurraysBoutique I will be honest with you. I barely understood your requirement, you just went way too technical here at least for me 😅.

 

Please try explaining again may be in simple terms and with few examples screenshots or videos for better understanding.

 

Best

Shadab

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
MurraysBoutique
Visitor
2 0 0
Think Roger Rabbit. Animation overlayed on a picture. #- Please type your
reply above this line -##