How To Add Different Videos For Mobile & Dekstop?

[Emiway]

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/

[DanCodes]

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.

[namphan]

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

[Emiway]

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

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

[namphan]

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;
}
}

[Emiway]

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

[namphan · Accepted solution]

Hi @Emiway,

I added option for it:

I hope it helps!