阻止一个元素出现在全屏视频之上。

Question

我已经看到了很多关于如何在全屏视频上显示div的答案，但我遇到了相反的问题:我无法在全屏视频下显示一个区段元素。

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

这发生在Safari和Chrome中，而不是Microsoft或Firefox，所以这肯定是一个webkit问题。我愿意解决这个问题: JS，CSS或其他。这看起来像是z索引的一个问题，但使用这些值没有任何影响。

​

​

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>

联署材料：

$(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;
}