Ilightbox echo in firefox

[Tierramitica]

Hello team,

For a page on my website, misfitsunified.com, I wanted to create buttons that activate video lightboxes(https://www.misfitsunified.com/who-we-are/). I followed instructions that I found on the forum and with the css codes I found the videos work great in chrome, but there is an enormous echo in firefox. Could you please help me with this? I used the following css:

body .ilightbox-holder.light {
width: 100%;
background-color: transparent;
box-shadow: none;
}

body .ilightbox-holder div.ilightbox-container {
max-width: 1027px;
max-height: 786px;
margin: 0 auto;
border: solid 10px #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

body .ilightbox-holder.ilightbox-next, .ilightbox-holder.ilightbox-prev {
display: none !important;
}

And I used a text element to create the button:
[button class=“videoLightbox” type=“real” shape=“square” size=“mini” href=“https://www.youtube.com/embed/2Cp415MrsLM?rel=0&autoplay=1” title=“MeetSimon”][icon type=“play”]Meet Simon[/button]

[lightbox selector=".videoLightbox"]

I could really use some help with this one! Thank you very much.

[nabeel]

Hi @Tierramitica,

Thank you for reaching out to us. It seems like an issue with your code, there are pretty quotes around the shortcode attributes. Try this: add a Content Area element and then paste the following code inside:

[button class="videoLightbox" type="real" shape="square" size="mini" href="https://www.youtube.com/embed/2Cp415MrsLM?rel=0&autoplay=1" title="MeetSimon"][icon type="play"]Meet Simon[/button]

[lightbox selector=".videoLightbox"]

I tested the above code in both Chrome and Firefox and it works fine, there is no echo. If you still have problems then please get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[Tierramitica]

Hello again,

I did what you suggested and I still have issues in firefox. In chrome everything is fine. I actually found out that it is not an echo, it is the audio of the other videos on the page that is playing at the same time. When I remove the ?rel=0&autoplay=1 addition from the links, the echo is no longer there, but would really like to be able to have the autoplay. I am putting the addition back now so you can check it out and I am adding a secure note.

Thank you for taking a look.

[tristup]

Hi @Tierramitica,

I have visited the given URL and found the Lightbox is working fine. Can you please check once by clearing the browser cache of Mozilla Firefox?

If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[Tierramitica]

Hi Tristup, the video plays well, it is the sound that is malfunctioning in firefox, I deleted the cache of the browser again, same result… it sounds as if all the videos on the page are playing at the same time even though you cannot see them.
I would provide a screenshot, but that would not help… Could you please check again and listen to the sound?

Thank you very much

[prakash_s]

Hello @Tierramitica,

I checked your given site URL and I can replicate the issue at my end. I went ahead and checked your page settings. It seems that you have used the same selector class for all the lightbox since you are using the same class for all the popup when the click event fires on the button click it loads the lightbox but at the same time the other lightbox also initializes just because of the other video are gets autoplay in the background.

I would suggest you add a different selector class for each lightbox. Let take an example from your content, If I have the add different selector for the “Jackie Wilchuck” lightbox my code would be something like this

Complet code

<p style="text-align: center;">[button class="videoLightboxJackieWilchuck" type="real" shape="square" size="mini" href="https://www.youtube.com/embed/6VS1YqKMTxQ?rel=0&autoplay=1" title="MeetJackie"][icon type="play"]Meet Jackie[/button]</p>
<p style="text-align: center;">[lightbox selector=".videoLightboxJackieWilchuck"]</p>

Please feel free to follow any naming method as per your wish for the lightbox selector class. Please remember you need to add the same name in the button class and in the lightbox selector. Please not e that the lightbox selector value would require dot**(.)** with the class name.

Here is an example
Button Class=videoLightboxJackieWilchuck
selector=.videoLightboxJackieWilchuck

Hope it helps
Thanks

[Tierramitica]

Hello Prakash,
That absolutely solved it, thank you so much for the help!

[ruenel]

You are most welcome.