Unable to click controls when an element is displayed on top of video - iOS voiceover #1137
Description
Hello,
I believe I’ve discovered a bug: when an element is displayed on top of the video player, the controls at the bottom of the video become unclickable for iOS VoiceOver users. I’ve attached videos to demonstrate the issue.
With text on top of video
Without text on top of video
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>some header</p>
<div id="made-in-ny"></div>
<p style="margin-top: 10px">test having contents in this space</p>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const player = new Vimeo.Player('made-in-ny', {
url: 'https://vimeo.com/878082684/89d18de1a5',
playsinline: true,
responsive: true,
play_button_position: 'center',
});
player.on('play', function () {
console.log('played the video!');
});
</script>
</body>
</html>In this HTML code, removing the <p>some header</p> element makes the video controls at the bottom clickable; however, when it’s present, the controls become unclickable.
iOS version: 26.2.1
Browser: Safari
Vimeo player version: v2.30.2