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

【问题标题】：Stop an element from appearing above fullscreen video阻止元素出现在全屏视频上方
【发布时间】：2018-03-30 23:50:00
【问题描述】：

我已经看到很多关于如何让 div 出现在全屏视频上的答案，但我遇到了相反的问题：我无法让 section 元素出现在全屏视频下。

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

这会在 Safari 和 Chrome 中出现，但在 Microsoft Edge 或 Firefox 中不会出现，因此它一定是 webkit 问题。我愿意接受任何解决此问题的想法：JS、CSS 或其他。这看起来像是 z-index 的问题，但使用这些值没有任何效果。

【问题讨论】：

此处不可复制，请上传您看到的截图。
添加了截图。您可以看到隐藏在英雄部分下方的视频
嗯，不知道为什么给玩家更高的 z-index 不起作用。但是从
元素中删除 z-index:10 时，播放器处于前台...

标签： video z-index fullscreen

【解决方案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;
}

【讨论】：

这会是 webkit 错误吗？有人我应该举报吗？