一开始业务部门的石頭芙同学给我提这个bug时,我是不相信的,我觉得一定是她的打开方式不对。我不改!
直到来到她的电脑前,亲眼看见了这一幕,我才意识到我错了。她说在她的项目页点击微信分享图标弹出的二维码提示框被视频挡住了,看图:
后来使用多台电脑测试,我发现这种情况会在IE浏览器下发生。虽然作为前端开发者极其不喜欢IE浏览器,但作为一个常常吹嘘自己的程序员,怎么能让别人看扁我的技术水平,改!
于是就开始了疯狂的debug之旅。
经过一番查找,对于解决方案有人说使用embed标签嵌入视频时,要设置wmode="opaque",还有的说要设置wmode="transparent",甚至还有人说在FireFox浏览器也会有这种问题,需要给embed标签加上子标签。我把这些方法都试了一下,好像是可以解决,但不同浏览器解决方法不一样。
正当我打开编辑器准备修改代码时,才发现这里的代码不是静态的,是后端动态生成的。而且,为了兼容各种视频播放源,后端对优酷、土豆、乐视等不同视频平台的视频源进行了不同的处理。也就是说,我要改这个还得修改后端代码。
让我静静......
正当我愁眉苦脸,不知道如何解决时,过来倒水经过的石頭芙同学瞅了一眼说:hài没改好呢?我知道石頭芙同学一向是睿智的,果不其然,她说:bìe瞎整了,我有办法。
石頭芙喝了口水,心急火燎地说:你把那微信图标往后挪一下,跟腾讯微博QQ空间啥的换下位置不完事儿了吗!
石頭芙果然是睿智的,用了最简单的办法解决了这个难题。结果就是下图:
以后我再也不吹牛皮了。