Volume bar overflow

[bodydisplaynone]

I noticed an issue where the volume bar overflows and overlaps the little gear icon. Using the latest version of plyr.

Multiple examples attached.

• I only experienced this in firefox (both dev and standard)

• chrome and edge looks ok

• tried audio

• tried file based video

• tried both the normal and the progressive yt type, they all share this issue

• hovewer, I found a codepen where this issue is not present in ff either (codepen link).

Any ideas?

https://plyr-io-tutorial.webflow.io/plyr-video-player-custom
https://codepen.io/2braincells2go/pen/rKZRGq

[cloudf73]

you are using old version of plyr on first example, it is using 3.5.6,
second example is not overflowing in my firefox.

[bodydisplaynone]

exactly, just as I said above..?

First is not my example, it's a site I found online. I'm not sure of the version here.
The second link is a codepen link and I told in the issue opener that it works fine.

Last two images are my implementations, using the plyr version that was downloaded today. The screenshots were also taken today.

[sampotts]

Are you using the latest version of the CSS? That's where the fix is for this issue.

[JeremyMeissner]

Hello,
I have exactly the same issue on Firefox (83.0).

I just tested with the latest version of plyr (3.6.3) and I have the same issue on Firefox (83.0). A friend had an old version of Firefox (80.0.1) and it worked, but as soon as he updated Firefox to 83, the bug was there.

[sampotts]

As above, check you have the latest CSS.

[JeremyMeissner]

My bad, I only checked the JS... It's working now, thank you! 😅

[bodydisplaynone]

I was using the latest css but either ff had an update since Friday or the cache was stuck. Now it works fine on my end too.