牛骨文教育服务平台(让学习变的简单)
博文笔记

Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

创建时间:2017-08-05 投稿人: 浏览次数:2632

今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新版本对权限的控制都越来越严格精细的原因

这里写图片描述

按钮点了没反应, 始终不能全屏

解决办法也很简单, 就是增加一个属性 allowfullscreen 就行了

例子:

<iframe src="https://v.qq.com/x/cover/vtxb95np45a6ooz.html#mod_player" frameborder="0" width="100%" height="100%"></iframe>

加上属性后

<iframe src="https://v.qq.com/x/cover/vtxb95np45a6ooz.html#mod_player" allowfullscreen frameborder="0" width="100%" height="100%"></iframe>

这样就可以实现全屏啦

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。