Перекрытие текста Кнопка Chrome HTML5 для воспроизведения / приостановки видео не позволяет работать

Question

У меня есть текст поверх видео HTML5 с элементами управления, и он перекрывает кнопку воспроизведения.В Chrome это мешает мне приостановить / воспроизвести видео.Пожалуйста, просмотрите эту скрипку в Chrome:

.vid-wrap{
  width: 100vw;
  position: relative;
}

.title{
  color: white;
  font-size: 38px;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}

video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body, html{
  margin: 0;
  padding: 0;
}

<div class="vid-wrap">
  <h2 class="title">
    My overlapping text goes here. <br/> Yours can too! <br/> This is overlapping text! <br /> The video can't be played or paused!
  </h2>

  <video controls autoplay playsinline muted>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
  </video>
</div>

https://jsfiddle.net/hb38fx47/

Есть ли какое-нибудь решение для этого?Возможно, способ получить кнопку воспроизведения на временной шкале, как это делает Firefox?Я бы предпочел не делать глупый JavaScript, как, например, программно воспроизводить видео при нажатии на контейнер, если я могу помочь ему ... это, вероятно, вызовет проблемы кросс-браузерно, в будущем, и это может показаться ненужным.