本文摘自PHP中文网，作者不言，侵删。
本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法，具有很好的参考价值，下面跟着小编一起来看下吧1.
在layer弹窗组件中
如果使用了flash播放器，全屏是正常的
但若使用了HTML5的播放器，全屏失效
举个栗子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="layer/layer.js"></script>
<style>
</style>
</head>
<body>
<h1>我是字</h1>
<p id="box">
<video id="video" controls preload="auto" width="400px" height="300px">
<source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
</video>
</p>
<script>
layer.open({
type: 1,
title: false,
shadeClose: true,
area: ['400px', '350px'],
content: $('#box'),
success: function(layero){
}
});
</script>
</body>
</html>
|
可以看到全屏不正常了
通过调试发现是这个class的处理影响了全屏的展示
阅读剩余部分
相关阅读 >>
html背景图片怎么全屏
如何解决layer弹出层中h5播放器全屏出错
怎样实现h5微信播放全屏
h5同层video播放器接入实例分享
在线演示一个全屏切换效果实例
如何解决html5微信播放全屏问题的方法
css怎么设置背景图片布满全屏
如何解决html5微信播放全屏问题
css怎么设置全屏背景图片
layui打开的layer的iframe窗口怎么关闭
更多相关阅读请进入《layer》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何解决layer弹出层中H5播放器全屏出错
