Plyr: Hiding volume and mute button on Mobile

[bigmmind]

Maybe someone can help. I can't hide the volume and mute buttons for a specific breakpoint. I tried JS with media queries like so but it doesn't seem to work. Thanks!

<script>
const mq = window.matchMedia( "(max-width: 991px)" );

if (mq.matches) {
const controls = [ 'play' ];
} else {
const controls = [ 'play', 'mute', 'volume' ];
}

const player = new Plyr('#player', { controls, settings}
);
</script>

[aubreyz]

It may not be the best way but I have been creating two different players - one for small use and one for bigger. It is easy enough to select different players if using bootstrap for example depending on the screen size, e.g the below would only show the player for size xs and sm

      <div class="col-12 d-inline px-0 d-md-none">
        <!-- Music Player small-->
        <p class="mb-2"><audio class="js-playersm">
            <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" /></audio></p>
      </div>

[bigmmind]

It may not be the best way but I have been creating two different players ```

Thanks a lot! Could you share the JS snippet for that too? Not quite sure how to set a class for js script

[aubreyz]

Try this js (they will both look the same as I wrote them but here you have js-playersm and js-player: You can omit some buttons from one or the other or do other stuff. As I said this may not be the best way, and there was some other discussion about fixing the responsiveness and overlapping of controls at small sizes but this works for me

//Big width
document.addEventListener('DOMContentLoaded', () => {
  const player = Plyr.setup('.js-player', {
    controls: ['restart', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', ],
  });
});

//Small width
document.addEventListener('DOMContentLoaded', () => {
  const player = Plyr.setup('.js-playersm', {
    controls: ['restart', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', ],
  });
});

[bigmmind]

Thanks a lot!

[bigmmind]

Try this```

Any chance you know of a way to reposition the buttons in the player? I'm trying to make it more suitable for podcast, which usually has central play button and forward/rewind buttons below.

[aubreyz]

Not 100% sure what you mean nor am I am expert -- but the order of the buttons is determined by the order of the controls listed (see above).
video can have a central button in the poster image so look at that code perhaps if that is what you mean

[bigmmind]

Not 100% sure what you mean nor am I am expert -- but the order of the buttons is determined by the order of the controls listed (see above).
video can have a central button in the poster image so look at that code perhaps if that is what you mean

Yes mainly my question was about reordering the buttons, I didn't realize that ordering them in the code does it. Thats neat! Thank you very much.
I was also thinking if there is a way to send some buttons on the new line, like 1st line is play buttons, second line is long progress bar.

[aubreyz]

I was also thinking if there is a way to send some buttons on the new line, like 1st line is play buttons, second line is long progress bar.

Well I would like that so maybe someone else would help. It would get around a lot of problems with responsiveness and overlapping controls too

[aubreyz]

See the below link for splitting controls over two lines, but it is a substantial hack - perhaps someone can suggest something simpler

https://codepen.io/patriferra/pen/VwLvdKP

[bigmmind]

Wow this looks promising and just what I was looking for. Thanks a lot!!!
Gonna give it a try

[bigmmind]

See the below link for splitting controls over two lines, but it is a substantial hack - perhaps someone can suggest something simpler

https://codepen.io/patriferra/pen/VwLvdKP

Success, now it works. But now I'm struggling with removing the restart and mute button from this code. As soon as I remove it, the player stops working. Any ideas?

[DELNEGEND]

Maybe someone can help. I can't hide the volume and mute buttons for a specific breakpoint. I tried JS with media queries like so but it doesn't seem to work. Thanks!

<script>
const mq = window.matchMedia( "(max-width: 991px)" );

if (mq.matches) {
const controls = [ 'play' ];
} else {
const controls = [ 'play', 'mute', 'volume' ];
}

const player = new Plyr('#player', { controls, settings}
);
</script>

Just use @media in css

@media screen and (max-width: 500px) {
  .plyr .plyr__controls button[data-plyr=pip],
  .plyr .plyr__controls button[data-plyr=mute],
  .plyr .plyr__controls button[data-plyr=volume] {
    display: none;
  }
}

[bigmmind]

@media screen and (max-width: 500px) {
  .plyr .plyr__controls button[data-plyr=pip],
  .plyr .plyr__controls button[data-plyr=mute],
  .plyr .plyr__controls button[data-plyr=volume] {
    display: none;
  }
}

Wow , amazing and so simple, just what I needed! Thanks a lot, I would never figure this out.