Plyr: Does anyone know how to hide the controls when the plyr is ready?

[SnugNest]

[sampotts]

Try

const player = new Plyr('#player');

player.on('ready', () => { 
    player.toggleControls(false); 
});

[SnugNest]

It dosen‘t work.Cause there are more one instance？

[sampotts]

Well you'll have to work it out then. You need to run .toggleControls(false) on each instance. Good luck with it 👍

[SnugNest]

I had tried but failed. Here is my core:

$(document).on("turbolinks:load", function() {
  plyr_options = {
    settings: ['captions','quality','speed']
  }
  const players = Array.from(document.querySelectorAll('.plyr-player')).map(player => new Plyr(player, plyr_options));
  for (var i = 0, l = players.length; i < l; i++) {
    players[i].volume = 0.5
    players[i].on('play', () => {
      players[i].player.toggleControls(false);
    });
  }
});

But it didn't work. Now I have one sollution to meet my need. The following is my sollution core:

$(document).on("turbolinks:load", function() {
  plyr_options = {
    settings: ['captions','quality','speed']
  }
  const players = Array.from(document.querySelectorAll('.plyr-player')).map(player => new Plyr(player, plyr_options));
  $(".plyr--stopped .plyr__controls").addClass('hhh');
  for (var i = 0, l = players.length; i < l; i++) {
    players[i].volume = 0.5
    players[i].on('play', event => {
      $('[style="--value:0%;"]').parents('div.plyr--video').addClass('plyr--hide-controls');
      $("div.plyr__controls").removeClass('hhh');
      const instance = event.detail.plyr;
    });
  }
});

.hhh {
  opacity: 0;
   pointer-events: none;
   transform: translateY(100%);
}

But it's butter to use the offical method.

[sampotts]

You might as well use .forEach() since you're using Array.from() to convert it to an array anyway.

const options = {
    settings: ['captions', 'quality', 'speed'],
    volume: 0.5
};

$(document).on("turbolinks:load", () => {
    const players = Array.from(document.querySelectorAll('.plyr-player')).map(player => new Plyr(player, options));

    players.forEach(player => { 
        player.on('ready', () => {
            player.toggleControls(false);
        });
    });
});

[SnugNest]

I have to say it still can't work... , besides, the options is also useless...

[sampotts]

Ah I can see now what the issue is. May I ask though, how is a user meant to start playback if there's no controls to do so?

[SnugNest]

Oh, you can see in my website snugnest.com . Like that , user can click the big-play to start.

[SnugNest]

I just want to archive the effect like this in my website.Now I archive this by my way, of couse it's better to archvie this by official way.