Plyr layout not ideal on mobile

[mrleblanc101]

Current Behavior:

This comes from an old Plyr issue: https://github.com/sampotts/plyr/issues/1836 When the viewport becomes narrow, the volume slider takes up all the space and makes the time slider unusable.

Expected Behavior:

On mobile, the volume slider should either collapse and show vertically on tap or be completely removed since phone have volume buttons

Steps To Reproduce:

Apply the Plyr layout. Resize the window.

Reproduction Link: [How to create a repro?][repro]

https://vidstack.io/player/demo/?framework=react&view=player&config=%7B%22player%22%3A%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2F720p.mp4%22%2C%22viewType%22%3A%22video%22%2C%22streamType%22%3A%22on-demand%22%2C%22logLevel%22%3A%22warn%22%2C%22crossOrigin%22%3Atrue%2C%22playsInline%22%3Atrue%2C%22title%22%3A%22Sprite+Fight%22%2C%22poster%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fposter.webp%22%2C%22textTracks%22%3A%5B%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fsubs%2Fenglish.vtt%22%2C%22label%22%3A%22English%22%2C%22language%22%3A%22en-US%22%2C%22kind%22%3A%22subtitles%22%2C%22type%22%3A%22vtt%22%2C%22default%22%3Atrue%7D%2C%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fsubs%2Fspanish.vtt%22%2C%22label%22%3A%22Spanish%22%2C%22language%22%3A%22es-ES%22%2C%22kind%22%3A%22subtitles%22%2C%22type%22%3A%22vtt%22%7D%2C%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fchapters.vtt%22%2C%22language%22%3A%22en-US%22%2C%22kind%22%3A%22chapters%22%2C%22type%22%3A%22vtt%22%2C%22default%22%3Atrue%7D%5D%7D%2C%22layout%22%3A%7B%22type%22%3A%22plyr%22%2C%22thumbnails%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fthumbnails.vtt%22%7D%2C%22hls%22%3A%7B%7D%2C%22dash%22%3A%7B%7D%2C%22events%22%3A%5B%22can-play%22%5D%7D

[mrleblanc101]

In my current project using Plyr, we injected custom CSS to completely hide the volume slider at a certain breakpoint (and some other elements, like the current time and duration).

We also hid the Picture in Picture icon since it's available if you use the native fullscreen experience, iOS and Android have a dedicated button, and it can also be triggered by swiping to your homescreen and it will auto-trigger PiP.

.plyr .plyr__controls button[data-plyr='pip'],
.plyr .plyr__controls .plyr__volume,
.plyr .plyr__controls .plyr__time--current,
.plyr .plyr__controls .plyr__time--duration {
    @include breakpoint(small down) {
        display: none;
    }
}

[mrleblanc101]

Here is what our customized Plyr looked like on desktop:

And mobile:

[jlc3p]

Seconded! I've been running into the same thing and have used similar CSS to tweak the controls' layout for narrow viewports, but it would be helpful to have some kind of built-in handling for this issue. Worth noting that as-is, the controls do not meet WCAG 2.1's 1.4.10 Reflow success criterion.

@media screen and (max-width: 24rem) {
  .plyr__controls .plyr__time--current,
  .plyr__controls .plyr__time--duration {
    display: none;
  }
}

@media screen and (max-width: 30rem) {
  .plyr__controls .plyr__volume media-volume-slider {
    display: none;
  }

  .plyr__controls .plyr__volume {
    max-width: none;
    flex-grow: 0;
    margin-left: calc(var(--plyr-control-spacing, 10px));
  }

  .plyr__volume + .plyr__controls__item {
    margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
  }
}