今天无意中测试了下在 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>

这样就可以实现全屏啦

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

  1. 去掉chrome浏览器中input或textarea在得到焦点时出现黄色边框的方法

    此文来源网络,我转载的原文里的图显示“该图片仅限百度用户内部交流使用”,我估计这篇文章是从百度空间抄过来的,该作者没保留原文地址.所以我在这里也没保留抄袭文章的地址. chrome浏览器不管对于开发者 ...

  2. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  3. 用mac的chrome浏览器调试Android手机的网页

    一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...

  4. chrome 浏览器的预提取资源机制导致的一个请求发送两次的问题以及ClientAbortException异常

    调查一个 pdf 打印报错: ExceptionConverter: org.apache.catalina.connector.ClientAbortException: java.net.Sock ...

  5. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  6. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  7. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

  8. 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps，loads，dump，load方法介绍

    爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...

  9. 在Chrome浏览器中保存的密码有多安全？

    本文由 伯乐在线 - 黄利民 翻译.未经许可,禁止转载!英文出处:howtogeek.欢迎加入翻译组. [2013-08-09 更新]:最近又开始讨论“Chrome浏览器明文保存密码这个话题了,国外一 ...

随机推荐

  1. Jenkins的持续集成

    持续集成:不需要人工干预,持久化.重复的运行一个任务.将代码自动的更新到最新,然后自动运行. 新建项目之前要再Jenkins的全局工具配置里面把git的路径设置好.[全局工具配置]-->[Git ...

  2. git-flow工作流程

    什么是 git-flow? 一旦安装安装 git-flow,你将会拥有一些扩展命令.这些命令会在一个预定义的顺序下自动执行多个操作.是的,这就是我们的工作流程! git-flow 并不是要替代 Git ...

  3. （转）在GitHub多个帐号上添加SSH公钥

    GitHub后台可以添加多个SSH Keys,但是同一个SSH Keys只能在添加在一个帐号上(添加时提示“Key is already in use”).理由很容易想到,SSH公钥使用时相当于用户名 ...

  4. Jitamin

    安装环境要求 PHP 5.6或更高(推荐使用PHP7) 数据库, 推荐使用MySQL 或 PostgreSQL. 当然SQLite也可以运行. Composer 安装手册 一. 克隆代码 假设我们把j ...

  5. STM32 IO口双向问题

    源: STM32 IO口双向问题

  6. Mysql日期转换函数、时间转换函数

    Mysql日期转换函数.时间转换函数 一.MySQL 获得当前日期时间 函数 1,获得当前日期+时间(date + time)函数:now(): select now(); 结果: :: 2,获得当前 ...

  7. 20145105 《Java程序设计》第4周学习总结

    20145105 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 一.何谓继承 (一)继承共同行为 继承基本上就是避免多个类间重复定义共同行为. 如:下述代码将剑 ...

  8. 20145221 《Java程序设计》第二周学习总结

    20145221 <Java程序设计>第二周学习总结 教材学习内容总结 第二周内容已在假期完成,详见博客: <Java程序设计>第三章-基础语法 代码调试中的问题和解决过程 第 ...

  9. AOP 增强方法

    Spring AOP 提供了 5 种类型的通知,它们分别是 Before Advice(前置通知).After Returning Advice(后置通知).Interception Around A ...

  10. SSH Secure File Transfer Client连接远程设备报“algorithm negotiation failed”错的解决方法

    SSH Secure File Transfer Client连接远程设备报"algorithm negotiation failed"错的解决方法 ssh client 报 al ...