I'd like to be able to append a custom item to the controls in a plyr.js video but this removes the settings item with speed settings.
As the title says, I need to be able to reintegrate the settings controls with the speed setting into my video. I'm trying to do it with with custom HTML but I'm getting no response when the settings icon is clicked.
On the default/working version of the player controls, the attribute of hidden="" seems to be removed/added to the plyr__controls__item, plyr-settings-{id}-home, plyr-settings-{id}-captions, etc. to show/hide it but doesn't do it with the settings menu added manually.
Specifically none of the javascript related functionality of the settings menu seems to be working. The hiding and showing of menus and the speed control buttons when showing them manually in the browser.
I'm providing the HTML code for the just the settings section because I believe I might be missing something there.
<div class="plyr__controls__item plyr__menu">
<button aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false" type="button" class="plyr__control plyr__tab-focus" data-plyr="settings">
<svg role="presentation" focusable="false">
<use xlink:href="#plyr-settings"></use>
</svg>
<span class="plyr__sr-only">Settings</span>
</button>
<div class="plyr__menu__container" id="plyr-settings-{id}">
<div>
<div id="plyr-settings-{id}-home">
<div role="menu">
<button data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
<span>Captions
<span class="plyr__menu__value"></span>
</span>
</button>
<button data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
<span>Speed
<span class="plyr__menu__value"></span>
</span>
</button>
</div>
</div>
<div id="plyr-settings-{id}-captions">
<button type="button" class="plyr__control plyr__control--back">
<span aria-hidden="true">Captions</span>
<span class="plyr__sr-only">Go back to previous menu</span>
</button>
<div role="menu">
<button data-plyr="language" type="button" role="menuitemradio" class="plyr__control" aria-checked="true" value="0">
<span>English
<span class="plyr__menu__value">
<span class="plyr__badge"></span>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
