How To Add Different Videos For Mobile & Dekstop?

How To Add Different Videos For Mobile & Dekstop Separate??
in This theme we only have 1 option
and i want different video for mobile
URL : https://a6b804-0a.myshopify.com/

To achieve this, you’ll need to modify the code to load different videos based on the device type (mobile or desktop). If you’re interested in the details or need assistance with the implementation, feel free to reach out via email.

Hi @Emiway ,

Please create a section for mobile and upload the video, then I will guide you to add CSS code to make it work

Hello Sir, I Had Created a Diffrent Section For Mobille And Uploaded On Site…

1st Video Is For Dekstop & 2nd Video Is For Mobile..

Hi @Emiway ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media screen and (max-width: 699px) {
#shopify-section-template--15186843566152__video_qnEVCB {
    display: none;
}
}
@media screen and (min-width: 700px) {
#shopify-section-template--15186843566152__video_iU6Net {
    display: none;
}
}

Working But Not Getting Transparent Header In 1 Version


Whichever will Be First is only supporting transparent header

right now first video is of dekstop versions so that transparent header is working fine.. but mobile video is second so not getting transparent header

Hi @Emiway ,

I added option for it:

I hope it helps!