HTML5 видео - наложите DIV над ним

Question

Поэтому у меня есть следующий код:

<div class="content"> 
    <div class="video-container"> 
     <video controls="true" autoplay="autoplay" loop="loop" muted="muted" preload="auto"> 
      <source src="/videos/bg-video.mp4" type="video/mp4"> 
      <source src="/videos/bg-video.ogv" type="video/ogv"> 
      Please upgrade your browser so that it supports HTML5 videos. 
     </video> 
    </div> 
    <div class="text"><!-- ... --></div> 
</div> 

И это CSS:

.content { 
    position: relative; 
    z-index: 5; 
} 

.video-container { 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1; 
} 

video { 
    z-index: -1; 
    height: auto; 
    position: relative; 
    min-height: 100%; 
    min-width: 100%; 
} 

Так .text ДИВ служит фактическое содержание страницы. Это div в середине страницы, и видео появляется в качестве фона позади него. Итак, вот в чем проблема: Когда я нажимаю на видео, я вижу такие параметры, как включение, полноэкранный режим, пауза, скорость воспроизведения, отображение/скрытие элементов управления/статистика, просмотр/копирование видео, сохранение, совместное использование видео по электронной почте. Вот почему я добавил z-index: -1; на .video-container. Но теперь я не могу выбрать какой-либо текст в своем .text div ?! Это действительно frustraiting ... Я добавил тег javascript/jquery в случае, если есть решение JS. Однако я предпочел бы принять решение разметки/css, потому что JS может быть отключен пользователем в любое время ...

Answer 1

При z-индексировании элемента вам нужно убедиться, что z-индекс других элементов - это расслоение также.

.text{ 
    position: relative; 
    z-index: 9; 
}