修正文章中同时添加幻灯和弹窗视频时,视频播放按钮被遮挡的bug

  • A+
所属分类:建博笔记

这个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是幻灯把文章中的其他图片当作了幻灯图片,因而导致鼠标在弹窗视频上左右移动时出现幻灯的翻页功能,从而影响到了视频控制条。

其实弹窗视频中不应该出现左右翻页箭头的,只不过这样改简单些,也就偷懒了。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: