How to add a background video to the homepage slider in Supply theme?

Supply is one of the most downloaded free themes from Shopify.

Why don't take advantage of its nice homepage to place one or more than one videos using Video background? 

This definitely can make your store look even better. 

Screenshot from 2017-12-20 17-19-50.png

It is possible to add videos to each slide easily using the following pattern:

ul.slides > li[data-flexslider-index="N"]:not(.clone)  img

where N is the index of the slide starting from 0.

If we want to put the video on the first slide, we have to write this selector:

ul.slides > li[data-flexslider-index="0"]:not(.clone)  img

and if we want to put the video on the third slide, we have to write this selector:

ul.slides > li[data-flexslider-index="2"]:not(.clone)  img

To do so, let's go to the app preferences page and tap on  New background video at the bottom right corner. After that, let's make sure we have selected home page and let's click on Save and select target.

Screenshot from 2017-12-20 17-20-22.png

To make the video appear in our desired location, we need to copy the configuration mentioned above in the  Element selector field. Don't forget to click on Save, at the bottom right corner, so that the changes can be applied. 

Remember to configure the transparency, it is important to keep the target element transparent:


If we want to replace the entire slider, we can use this selector: