Webcomponent : Poster is hidden on iOS #1752
Description
Current Behavior:
The poster is hidden although state.error is null, state.loading is false, image is available (works on desktop).
Expected Behavior:
Poster should not be hidden
Steps To Reproduce:
<media-player src="youtube/N8tO1YD_eQ4">
<media-provider>
<media-poster class="vds-poster" src="https://img.youtube.com/vi/N8tO1YD_eQ4/maxresdefault.jpg"></media-poster>
</media-provider>
<media-audio-layout></media-audio-layout>
<media-video-layout class="vds-video-layout dark"></media-video-layout>
</media-player>Environment:
- WebComponent
- Node: 24.10
- Device: iPhone SE
- OS: [email protected]
- Browser: Safari / Brave
Anything Else?
A workaround is :
const poster = element.querySelector("media-poster");
if (poster) {
poster.subscribe((state) => {
if (state.loading === false && !state.error && state.src) {
poster.removeAttribute("data-hidden");
poster.removeAttribute("display");
poster.setAttribute("data-visible", "");
poster.querySelector("img")?.removeAttribute("style");
}
});
}