I built a page with an accordion of 3 items. The last one holds a Vimeo player using the video element. On iOS devices, if the first two accordion items are collapsed, expanding the third will show an invisible Vimeo player.
When I tap where the Vimeo play button should be, I can hear the audio of the video playing. And tapping where the full screen button should be will play the video in full screen, but when I exit full screen, the player/video is still invisible. I added a border to the video element to help me see that something is there.
Oddly, as soon as you open either of the first two accordion items, the player becomes visible. The accordion interaction and Vimeo player actually work perfectly when either or both of the first two accordion items are expanded, just not if the first two are collapsed.
So if you expand either of the first two accordion items, then expand the last one, you can see the Vimeo player. Then if you collapse the first two, the Vimeo player remains visible. But when you collapse the last accordion item, the Vimeo player doesn’t collapse with it. It stays visible, but not tappable, even though the accordion item is collapsed.
I tested reordering the accordion items, moving the last item with the video into the second position, and it worked perfectly. I have no idea why. But I need it in the last position.
This seems to only be an issue on iOS devices, regardless of the browser. It works as expected on the desktops and android devices I’ve tested, so I’m not sure if there’s anything I can do or if this is an issue with iOS. I’d really appreciate any ideas you might have!
Here’s a screen recording of what I’m seeing.
Read-Only Link - Note that “Accordion items” are set to display: none; but animate in on page load.
And here is the Published site.