how to add a background video to collection banner

[momsabhiruchi]

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

[Shadab_dev]

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.

[MurraysBoutique]

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]

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

[MurraysBoutique]

Think Roger Rabbit. Animation overlayed on a picture. #- Please type your
reply above this line -##