Hiding Other Video Lightboxes

[SecureAPlus]

My page has a video lightbox. I initially set it to autoplay but since the section has a mirror version meant for (and visible only to) mobile, doing so causes both versions to play simultanously.

After perusing the forums, I found out that removing auto-play fixes this. Now the issue with this still is that the other version of the video still pops out on the side (ala slider) while viewing the video optimal for the current screen size. How can I hide the version that’s not supposed to be seen while playing the video?

Also, is there a way for this to work with auto-play still kicking in whereby it auto-plays the correct sized version of the section?

[christian]

Hey @SecureAPlus,

Which page of your site is having this issue so we could replicate the setup on our end and give you a specific solution.

Thanks.

[SecureAPlus]

I’ve put the URL on the secure note. Let me know if you were able to see it.

[rad]

Hi @SecureAPlus,

There is no problem with the lightbox, it’s just that with multiple instances of lightbox and video, you use similar selectors. Hence, it’s like selecting two videos (desktop and mobile) and just a single trigger. Hiding it from devices will have no effect since lightbox selections don’t work that way, it’s not a browser that selects based on screen size. What you could do is use class and selectors unique for each instances and device. Example,

Instead of just secureemail-video and .secureemail-video you can expand it more to something like,

secureemail-video-desktop and .secureemail-video-desktop
secureemail-video-mobile and .secureemail-video-mobile

That way, your lightbox instance is separated for each device.

Thanks!