你能阻止fancyBox导航区域遮挡媒体控件吗？

Question

我正在使用fancyBox 2.1.5和附带的媒体助手来显示和导航Vimeo视频。

除了下一个和前一个可点击区域遮挡底部的视频控件外，一切都很有效。这是一张突出显示Next区域的图片。

如您所见，您将无法调整音量，切换到全屏或操纵此区域下方的进度条。

我知道导航箭头可以放在演示区域的外面，但它会减少移动设备上的显示空间，所以我宁愿不这样做。

在显示视频时，是否可以防止这些可点击区域一直延伸到底部？或者我可能没有考虑过另一种解决方案？

Answer 1

我找到了解决方案！结果是jquery.fancybox.css中的导航块包含top偏移量和height参数！

保持top: 0并设置height: 90%会在框架底部留下10％的间隙，让您与视频控件进行互动！这是我添加到我网站的CSS中的整个块：

/* Prevent navigation from occluding play controls for videos */
.fancybox-type-iframe .fancybox-nav {
    height: 90%;
}

作为一个百分比，如果你有一个短的，非常宽的视频，90％的覆盖范围仍然会影响视频控制，但到目前为止，这对标准视频尺寸（如720p）效果很好。