on one of our pages we use ableplayers inside of a <details> element:
<details style="margin:1%;">
<summary role="button" aria-expanded="false" style="background-color: #f2f2f2; padding:1.5%;">
<h3 style="display:inline">Begrüßung</h3>
</summary>
<div class="row" style="height:5%; margin:1%">
<p>Das dritte Vernetzungstreffen des Innovationsforum Barrierefreiheit wird durch begrüßende Worte von Frau Prof. Dr. Erdmuthe Meyer zu Bexten (geschäftsführende Direktorin des BliZ) und Frau Dr. Sarah Voß-Nakkour (<strong>studium</strong>digitale) eingeleitet. </p>
</div>
<div style="margin:1.5%; width:100%">
<video data-lang="de" id="video1" data-able-player="" preload="metadata" width="1280" lang="de" height="auto">
<source type="video/mp4" src="https://www.hessenhub.de/wp-content/uploads/2020/12/Begruessung.mp4">
<track kind="subtitles" src="https://www.hessenhub.de/wp-content/uploads/2020/12/Begruessung_final.vtt">
</video>
</div>
</details>
On initialisation the ableplayer is not on screen. Therefore the $BigPayButton Element get a width and height of 0 assigned. Resulting in the button being in the upper right corner, not in the center when the <details> element is expanded.
Looking into the code the changes in visibility should be caught by a MutationObserver and refreshControls('init') should be called. But testing with Firefox 78.15.0esr and Brave V1.32.106 (using Chromium 96.4664.45) (both on Windows) this is not working.
Hi,
on one of our pages we use ableplayers inside of a
<details>element:On initialisation the ableplayer is not on screen. Therefore the $BigPayButton Element get a width and height of 0 assigned. Resulting in the button being in the upper right corner, not in the center when the
<details>element is expanded.Looking into the code the changes in visibility should be caught by a MutationObserver and
refreshControls('init')should be called. But testing with Firefox 78.15.0esr and Brave V1.32.106 (using Chromium 96.4664.45) (both on Windows) this is not working.