文字与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 ...在将来可能会导致跨浏览器出现问题，并且似乎不需要做这些事情。