Plyr: hideControls option; possibility to hide them on load

[qikkeronline]

Would be great if the hideControls would also make sure that the controls are initially invisible as well. Or an extra option for that maybe.

Thanks for considering 👍

[qikkeronline]

For other people who are looking to achieve this behaviour: I've worked around it atm like this:

JS:

$('.plyr').on('ready', function(event) {

    $(this).addClass('plyr--init-hide-controls');

}).on('play', function(event) {

    $(this).removeClass('plyr--init-hide-controls');

});

and CSS:

.plyr--init-hide-controls .plyr__controls {
    opacity: 0;
}

[qikkeronline]

Actually; this is a far better solution (CSS only):

    .plyr--stopped .plyr__controls {

        opacity: 0;

    }

[sampotts]

I think this one can be closed now? Good idea with the CSS class hook usage 👍

[kevnk]

I would add pointer-events: none; as well so you can click on controls even when they're invisible:

.plyr--stopped .plyr__controls {
  opacity: 0;
  pointer-events: none;
}

[kevnk]

I didn't like having controls hidden always when stopped. I just wanted them hidden until they started playing the video. So my final implementation hides the controls by default on stopped, but then allows you to see the controls as normal (when stopped and on hover) after playing the video:

js

plyr.setup();
$('.plyr').on('play', function(event) {
  $(this).addClass('plyr--init-play');
});

scss

.plyr--stopped.plyr--video { // only for video; don't hide initial controls for .plyr--audio
  .plyr__controls {
    opacity: 0;
    pointer-events: none;
  }
  &.plyr--init-play {
    .plyr__controls {
      opacity: 1;
      pointer-events: inherit;
    }
  }
}

[ashleahhill]

Found this ticket looking for a configuration option on plyr for this. Just want to point out that the default style for .plyr__controls puts pointer-events: all on all direct decedents, so in the examples above the styles should be:

.disable-controls .plyr__controls {
    opacity: 0;
    & > * {
        pointer-events: none;
        cursor: auto;
    }
}