Проблема с невидимостью элементов управления в полноэкранном режиме может быть связана с несколькими факторами. Ваш CSS-код на этот момент устанавливает для `.videoplayer__controls` свойство `visibility: hidden;`, что может быть причиной того, что элементы не отображаются. Давайте рассмотрим несколько шагов для исправления этой проблемы.
1. **Проверка CSS свойств**: Убедитесь, что контролы делают видимыми в полноэкранном режиме. Замените `visibility: hidden;` на `visibility: visible;` для `.videoplayer__controls` при активации полноэкранного режима.
2. **Обработчик смены полноэкранного режима**: Добавьте JavaScript, чтобы обрабатывать события начала и окончания полноэкранного режима и показывать элементы управления. Вот пример кода:
```javascript
const video = document.getElementById('video');
const videoControls = document.getElementById('videoControls');
const fullscreenButton = document.querySelector('.vp-fullscreen');
fullscreenButton.addEventListener('click', async () => {
if (!document.fullscreenElement) {
await video.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
video.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
videoControls.style.visibility = 'visible'; // Показываем контролы
} else {
videoControls.style.visibility = 'hidden'; // Скрываем контролы
}
});
```
3. **Проверка других CSS-свойств**: В вашем CSS-коде стоит проверить, нет ли ограничений по размеру или положению для `.videoplayer__controls`, которые могли бы заставлять их оставаться вне видимой области. Вы можете поиграться с `top`, `left`, `right`, `bottom`, а также со свойством `display`. Попробуйте использовать обычное значение для `display`, например, `display: flex` или `display: block`.
4. **Очистка кода**: Проверьте, нет ли лишнего кода, который мог бы влиять на отображение контролов, особенно в состоянии полноэкранного режима. Убедитесь, что стиль на `.vp-fullscreen` кнопке не блокирует доступ к другим элементам управления.
После внесения изменений, возможно, вам придется протестировать, чтобы убедиться, что все работает правильно. Если проблема сохраняется, пожалуйста, предоставьте больше информации о том, как именно вы активируете полноэкранный режим и каким образом обрабатываются события, чтобы можно было предложить более специфические решения.