play-large button is missing, when using custom html for controls

[JohMun]

Plyr: 3.5.10
Codepen: https://codepen.io/JohMun/pen/PoqLwjB

If I use a HTML string to create the controls, as explained here i get the following error:

The centered Button "play-large" is missing.

Also some of the stylings are not correct:

The range input in "plyr__progress" should contain width: 100%, i think.

[vogdb]

You can add play-large to your custom controls as well

const controls = `
<div class="plyr__controls">
   // ... your custom controls
</div>
// our big center button
<button type="button" class="plyr__control plyr__control--overlaid" data-plyr="play" aria-pressed="false" aria-label="Play, View From A Blue Moon - Official Trailer (4K Ultra HD) - John Florence"><svg aria-hidden="true" focusable="false"><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>
`;
const player = new Plyr('#player', {
    controls: controls,
});