Вычисленный Z-индекс не соответствует стилю элемента

Question

В настоящее время работает над видеоплеером html5. Я сталкиваюсь с проблемой, когда после того, как элемент видео отображается в полноэкранном режиме, мои пользовательские элементы управления не активируются из-за того, что для z-index видео установлено значение max int; так же, как элементы управления z-index. элементы управления мультимедиа браузера по умолчанию уже скрыты.

<div id="video-container">
  <video frameborder='0' id="page-video" playsinline>
        <source src='{{source}}'>
  </video>
  <div class="container" id="player-controls">
     <!-- controls go here -->
  </div>
</div>

Вот CSS для видео контейнера в полноэкранном режиме:

#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}

вот CSS для видео в полноэкранном режиме:

#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}

Вот CSS для элементов управления:

#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647; 
cursor: pointer;
}

в инструментах разработчика Chrome вычисленный z-индекс для элемента видео изменяется с автоматического, когда он НЕ в полноэкранном режиме, на 2147483647, однако при нажатии на стрелку, чтобы развернуть его, отображается z-index: 1! Важный стиль из моего таблица стилей. Этот стиль не перечеркнут или что-нибудь. Я не очень понимаю, почему это происходит. Это единственные два места во всей моей таблице стилей, которые используют z-index. Нигде нет отрицательных z-индексов.

Answer 1

Тег видео будет игнорировать z-index, установленный для него, и будет использовать стили UA "auto" и 2147483647, если вы не установите для него position: absolute или position: fixed. См. HTML5-видео, игнорирующее z-index

Answer 2

Чтобы скрыть собственные элементы управления, их необходимо отключить с помощью атрибута «controls».

<video controls="false">...</video>

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

video::-webkit-media-controls {
    display:none !important;
}

Чтобы показать ваши пользовательские элементы управления, просто установите z-index на значение max int.

#player-controls {
    z-index: 2147483647;
}

Все это описано в этом блоге: https://css -tricks.com / custom-controls-in-html5-video-full-screen /