Firefox处理CSS :: target

Question

工作示例：http://whateverworks.style/

我使用css :: target“技巧”（https://bitsofco.de/the-target-trick/）来隐藏和显示视频灯箱，改编自https://codepen.io/gschier/pen/HCoqh。视频“src”本身通过jquery插入到HTML Video标签的ID中，该标签本身位于灯箱中，如下所示：

$(document).ready(function() {

  $(".works a").click(function(event) {
    var a = $(this).data('localvideourl'); //getter
    $("#localvideo-player").attr("src", function() {
      return a;
    });

    $("#localvideo-player").load()
  });

  $('.lightbox').click(function(e) {
    $('#localvideo-player')[0].pause();
  });
});

这种机制在Chrome，Safari等上运行良好。但不是在Firefox上，至少在OSX上（没有Windows，所以无法尝试）。问题似乎是，与其他浏览器不同，OSX上的Firefox似乎在实际考虑点击视频元素控件之前执行CSS Hide技巧。那么，如果单击全屏幕，它会隐藏.lightbox div然后执行播放器控件上的单击，所以会发生这种情况，因此在全屏模式中播放隐藏的div。请注意，显示/隐藏DIV实际上不是通过JS完成的，而是仅使用CSS，只是使用jQuery插入视频URL。

我怎样才能避免FF表现得像这样？我在这里不知所措，因为它似乎只是Firefox的问题。