阻止元素出现在全屏视频上方

Question

我已经看到很多关于如何使div显示 over 全屏视频的答案，但是我遇到了相反的问题：我无法让一个section元素出现 全屏视频。

视频位于第二部分，点击播放和全屏以查看错误：http://arc.karo.com/

这种情况发生在Safari和Chrome中，但不适用于Microsoft Edge或Firefox，因此必须是webkit问题。我愿意解决这个问题：JS，CSS或其他。它看起来像z-index的问题，但使用这些值没有任何效果。

Answer 1

事实证明，clip-path属性令人困惑。我能够通过切换一个类来解决它，无论何时单击全屏都会删除所有剪辑路径。这是Brightcove播放器特有的，但可以通过一些简单的编辑应用于任何嵌入式视频。

HTML：

<video
    id="bc-player" 
    data-video-id="{{ entry.videoId }}"
    data-account="1098679119001" 
    data-player="rkZZRZTudz" 
    data-embed="default" 
    data-application-id 
    class="video-js" 
    controls 
    width="343" 
    height="192.94">
</video>
<script src="//players.brightcove.net/1098679119001/rkZZRZTudz_default/index.min.js"></script>

JS：

$(document).ready(function(){ 
  videojs('bc-player').ready(function(){
    var myPlayer = this;
    var myFunc = function(){
      var myPlayer = this;
      $('body').toggleClass('fullscreen-toggle');
    };
    myPlayer.on("fullscreenchange", myFunc);
  });
});

CSS：

.fullscreen-toggle * {
  -webkit-clip-path: none !important;
  clip-path: none !important;
}