今天无意中测试了下在 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. poi根据模板导出word文档

    POI结构与常用类 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人员则可以利用NPOI ...

  2. Flask系列之源码分析(二)

    应用技术点 python之__setattr__ python之threading.local python之偏函数 flask源码上下文管理 1.综述过程 将请求对象压入栈 1.请求进入 __cal ...

  3. 前端基础（JavaScript）2

    3.2 Array对象 3.2.1 数组创建 创建数组的三种方式: 创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 创建方式2: var ...

  4. deepin中crossover或playonlinux装完office后word无法输入中文的问题

    原因:office安装是自带了一个微软输入法 解决:装offce时进行自定义安装,在office共享功能里,把输入法去掉. 参考: https://jingyan.baidu.com/article/ ...

  5. mssql查询所有上下级

    if exists (select * from sys.all_objects where name='GetOrgTreeByID') begin drop proc GetOrgTreeByID ...

  6. 【运维技术】kafka三实例集群环境搭建及测试使用

    kafka三实例集群环境搭建及测试使用 单机搭建分为两部分:1. 软件安装启动 2. 软件配置 软件安装启动: # 切换到目录 cd /app # 获取kafka最新安装包,这边使用的是镜像地址,可以 ...

  7. 常用php操作redis命令整理（一）通用及字符串类型

    Key相关操作 TYPE 类型检测,字符串返回string,列表返回 list,set表返回set/zset,hash表返回hash,key不存在返回0 <?php echo $redis-&g ...

  8. Python3.x：bs4解析html基础用法

    Python3.x:bs4解析html基础用法 代码: import urllib.request from bs4 import BeautifulSoup import re url = r'ht ...

  9. 20145219《网络对抗》MSF基础应用

    20145219<网络对抗>MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode exploit:把实现设置好的东西送到要攻击的主机里. payl ...

  10. Codeforces Round #394 (Div. 2) A,B,C,D,E

    A. Dasha and Stairs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...