Тег над HTML5 <video>закрывает кнопку воспроизведения и не воспроизводит

Question

Здравствуйте, я поместил некоторый HTML контент (текст, кнопки и т. Д. c) поверх самого видео. Таким образом, кнопка воспроизведения в центре тега видео html5 не воспроизводится. Любой способ обойти это?

html

<div class="header-unit">
                        <div id="video-container">
                            <video poster="{{item.media_pic}}" controls webkit-playsinline class="fillWidth" #video >
                                <source src="{{item.image_path}}" type="video/webm" />
                                <source src="{{item.image_path}}" type="video/mp4">
                                <source src="{{item.image_path}}" type="video/ogg">
                                Your browser does not support HTML5 video.
                            </video>
                        </div>
                    <ion-row> 
                        <ion-col col-12>
                            text over video
                        </ion-col>
                    </ion-row><br />
                  </div>

css

 .header-unit {
  height: 400px;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
 }
 #video-container {
     position: absolute;
 }
#video-container {
    top:0%;
    left:0%;
  height:100%;
  width:100%;
  overflow: hidden;
 }
 video {
    position:absolute;
  z-index:0;
 }
 video.fillWidth {
  width: 100%;
  height:100%;
  background: rgba(0, 0, 0, 0.6);
} 

Я пытаюсь z-index, но это то же самое