这个bug的出现需要同时满足以下两个条件:
- 文章中同时存在幻灯和视频
- 该视频为弹窗视频
bug分析
由于幻灯需要检测文章中的图片,而幻灯中的翻页功能其高度默认为100%,因此当弹窗视频设置视频封面时,该封面被误以为是幻灯的一部分,从而导致视频在弹窗播放时播放按钮被幻灯的翻页功能遮挡,具体表现如下:
上图其实是一个视频,红色长方形区域其实是视频控制条,当鼠标移向控制条时被幻灯的翻页功能遮挡,导致视频控制条无法点击。
解决办法
打开主题根目录下的【style.css】文件,找到代码
.fancybox-nav { position: absolute; top: 0; width: 45%; height: 100%; cursor: pointer; background: transparent url(img/blank.gif); -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; }
将其中的
height: 100%;
修改为
height: 90%;
即可。
实际上,严格来说,这个高度值是没问题的,真正的bug是幻灯把文章中的其他图片当作了幻灯图片,因而导致鼠标在弹窗视频上左右移动时出现幻灯的翻页功能,从而影响到了视频控制条。
其实弹窗视频中不应该出现左右翻页箭头的,只不过这样改简单些,也就偷懒了。
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!