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

最新推荐文章于 2024-04-17 21:19:32 发布

神神的蜗牛

最新推荐文章于 2024-04-17 21:19:32 发布

阅读量2w

点赞数 1

分类专栏： javascript 文章标签： chrome iframe 视频全屏 fullscreen

本文链接：https://blog.csdn.net/zhouzme/article/details/76736701

版权

javascript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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

这样就可以实现全屏啦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

神神的蜗牛

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决Html iframe 内嵌video标签导致视频无法全屏展示的问题

Wang_zhe_的博客

03-15

1616

iframe内嵌video，视频无法全屏展示

iframe嵌套 video标签全屏按钮无法使用

王永存

12-10

2455

在iframe里添加一个属性：allowfullscreen="true" 即可

1 条评论您还未登录，请先登录后发表或查看评论

iframe框架嵌入网页会导致Chrome浏览器中视频不能全屏？(转)

dragoo1的专栏

03-08

2015

这次给大家分享的是iframe框架嵌入网页导致Chrome浏览器中视频不能全屏的解决方案，但在其他浏览器中似乎都很正常, 应该是 Chrome 6.0 新版本对权限的控制都越来越严格精细的原因。其实解决办法也很简单, 就是增加一个属性allowfullscreen就行了。不能全屏的代码如下： <iframe src="himill.com/player.html" frameb...

H5 iframe标签内video无法全屏

qq_21479345的博客

04-13

1499

解决方法：为iframe添加allowfullscreen属性，例： <iframe src="xxx.html" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" > </iframe>

videojs播放器iframe无法全屏

sh2018的博客

02-12

1523

iframe添加allowfullscreen属性即可, 如下所示 <iframe src="video.html" frameborder="0" width="100%" height="100%" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> 参考:video.js inside a .

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

仿站、源码搭建/迁移技术博客

03-20

5096

今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在浏览器中居然无效, 试了好几个视频网站的视频都不能全屏。问题：按钮点了没反应, 始终不能全屏答案：解决办法也很简单, 就是增加一个属性allowfullscreen就行了例子: 加上属性前： <iframe name= "iFrame1 " width=100% height=450 src= "h...

iframe嵌套视频，视频全屏用不了

小武的博客

01-16

4280

应在iframe中加入 allowfullscreen="true" <iframe id='orbitIframe' [src]="dataSearchUrl|safe" width="100%" height="100%" frameborder="0" align="center" allowfullscreen="true">

jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

10-20

而在iframe中实现全屏化的功能，则需要使用到浏览器提供的全屏API，这个API能够让当前的元素（例如一个video、image或者其他DOM元素）进入到全屏模式。接着我们看下文中提到的全屏API的兼容性问题。不同的浏览器...

div被iframe遮住的几种情况及解决方法

09-28

在IE8中，当IFRAME内部嵌入video元素进行视频播放时，可能会导致外部元素的z-index层级设置失效，即不论外部元素的z-index值是多少，都会被IFRAME覆盖。解决这个问题的一个方法是在IFRAME的URL参数中添加wmode=...

Web 端视频播放的常见问题及相应解决方案

最新发布

eshine Lau 的博客

04-17

1184

视频播放失败网络跨协议拦截 CDN 无视频 CDN 鉴权失败微信浏览器拦截跨域问题视频未转码异常视频浏览器环境不支持播放浏览器不支持 Flash 浏览器不支持 MSE 浏览器不支持解码 H264 或者不支持播放 MP4、HLS 格式的视频 HLS 加密视频播放失败获取 key 失败解密失败浏览器劫持视频播放视频激活播放后强制全屏视频无法被其他元素覆盖播放器出现多余的图标播放器出现广告、下载、推荐视频等内容 Android 端播放视频不会随着页面滑动播放器显示尺寸播放器出现黑

VLC在Chrome、Edge新内核、360系列、FireFox、IE、Opera等桌面浏览器各版本中打开播放rtsp rtmp视频解决方案

XM972340118的专栏

08-29

4015

VLC网页内嵌媒体播放小程序：基于跨浏览器的小程序系统-PluginOK(牛插)中间件( https://github.com/wangzuohuai/WebRunLocal )开发，底层调用VLC的ActiveX控件axvlc.dll(需下载安装VLC media player)实现播放。最低可用在Chrome 41、Firefox 52、Edge 80(Chromium内核)、360极速/安全、IE 8、Oprea 36、QQ、搜狗等浏览器，也兼容运行于这些浏览器的最新版本。 1、牛插(PluginO

实现：弹出iframe内嵌页面元素全屏化

Bala大叔

06-22

4315

一直也没分享有用的东西给大家，今天刚好做一个例子，整理了一下，顺便发给大家。希望多大家有帮助。弹出iframe内嵌页面元素到父页面并全屏化 iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大...

iframe中资源全屏按钮失效（如视频）

菜菜我是谁的博客

05-17

967

项目场景： a项目中嵌入b项目问题描述： b项目中有视频播放器在a项目中无法使用全屏解决方案： <iframe id="myIframe" :src="sourceSrc" allowfullscreen="true"></iframe> 在iframe标签中加入allowfullscreen的属性 ...

解决Iframe无法全屏问题