Как щелкнуть элементы управления в iframe YouTube за меньшим элементом управления, расположенным поверх него? ⇐ CSS

[Гость]

У меня есть iframe, содержащий видео YouTube или Vimeo, для которого я хочу сделать некоторые элементы управления неактивными (настройки, полноэкранный режим и т. д.). Это связано с тем, что пользователь должен иметь возможность только воспроизводить, приостанавливать и изменять громкость видео. Приложение предназначено для пользователей с когнитивными нарушениями, поэтому мы не хотим, чтобы они переходили со страницы на YouTube или возились с настройками.

Код: Выделить всё

iframe {
position: absolute;
z-index: 0;
}

div-1 {
position: absolute;
top: -15px;
right: -15px;
bottom: 50px;
left: -15px;
width: 865px;
height: 570px;
z-index: 1;
}

div-2 {
position: absolute;
right: -15px;
bottom: -15px;
width: 133px;
height: 85px;
background-color: transparent;
z-index: 1;
}

Код: Выделить всё

https://player.vimeo.com/video/786523922?title=0&byline=0&portrait=0&autoplay=1&transparent=0

Решение, которое применялось последние несколько лет, внезапно перестало работать месяц назад. Это означало добавление двух элементов div поверх iframe, которые охватывали бы основную область видео, и правый нижний угол, содержащий некоторые элементы управления. См. скриншоты ниже:


При попытке щелкнуть любую часть iframe, не закрыто, ничего не происходит. Невидимые части элементов div закрывают iframe. события указателя: нет; в div не работает. Это также не проблема с z-индексом, поскольку я пытался удалить z-индекс и позволить контексту стекирования выполнять свою работу; тот же результат. Вот CSS свойства элементов:
Это проблема только Chrome, и она начала возникать около месяца назад. Я пробовал это в Firefox и Safari, поэтому думаю, что обновление изменило некоторую логику контекста стека. Кто-нибудь сталкивался с этим?

Подробнее здесь: https://stackoverflow.com/questions/765 ... -on-top-of