苹果cms教程

苹果CMS iframe播放器全屏失效解决方法 完整属性代码

发布时间:2024-08-04共11人阅读

一、全屏功能失效原因说明

苹果CMS部分模板采用iframe嵌套播放器模式,默认状态下iframe标签缺少全屏授权属性,浏览器会自动限制内嵌页面的全屏调用权限,导致视频播放器点击全屏无反应、全屏按钮失效等问题。只需在iframe标签中补充兼容属性,即可解除浏览器权限限制,恢复正常全屏播放功能。

二、全浏览器兼容全屏属性代码

为适配主流浏览器内核,需要同时添加通用全屏属性与各浏览器专属兼容属性,保障电脑端、移动端所有浏览器均可正常触发全屏功能。修改替换对应播放页iframe代码即可生效,完整可用代码如下:

<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>

三、代码修改使用方式

打开站点播放页对应模板文件,找到视频播放对应的iframe嵌套代码,将原有标签替换为上述兼容代码。保存文件并刷新页面缓存后,播放器全屏按钮即可正常使用,支持任意浏览器一键全屏播放视频。