HTML5视频覆盖Safari中的元素，尽管z-index设置

Question

我有一个#hero div，其中包含video和.headline div。在除Safari之外的所有浏览器上，它通过视频自动播放呈现，并在视频顶部覆盖headline div。在Safari中，无论我对两个元素的z索引做什么，.headline div都会留在video之后。谁能告诉我这里我做错了什么？代码如下。提前谢谢！

HTML

  `<div id="hero" class="col s12 valign-wrapper">
  <video class="hide-on-small-only responsive-video col s12" autoplay muted loop>          
    <source src="<?php echo $video_url; ?>" type="video/mp4"> 
  </video>
  <div class="col l4 offset-l6 s12 valign headline">
    <div class="headline-inner">
    <h1><?php print render($content['field_hero_headline']); ?></h1>
    <p><?php print render($content['field_hero_body']); ?></p>
    <a download class="btn" href="<?php echo $download_url; ?>"><?php print render($content['field_hero_button_text']); ?></a>
    </div> <!--.headline-inner-->
  </div> <!--.headline-->
</div> <!--.hero-->`

CSS

#hero {position: relative; width: 100%;} .headline {background-color: #ffffff; position: absolute; border-left: 3px solid #0053b9;}