Jquery 视频海报图像不工作

使用此视频背景：

但是，如果浏览器不播放视频（即手机），海报图像不会显示，只显示一个空的黑框。如果我从海报中删除隐藏类并在此处注释css：

.no-video .video-container video,
.touch .video-container video {
  /*display: none;*/
}

---

它显示在视频框下，然后跳转以填充该区域，就像您滚动时一样。有人能给我指出正确的方向，让海报图像正常工作，使其在默认情况下像视频在移动设备和不受支持的浏览器上一样显示吗？

结果表明，这与使用.hidden{visibility:hidden}而不是display:none引导冲突

JSFIDLE上的代码太多了。你能把它减少到解释问题所需的最小值吗？另外，不清楚为什么你不只是使用视频元素的海报属性。问题是移动设备只是在视频应该在的位置显示一个黑框。我想真正的问题是移动设备的回退映像。事实证明，这与使用.hidden{visibility:hidden}而不是display:none的引导冲突；