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

最新推荐文章于 2023-07-24 17:49:55 发布
最新推荐文章于 2023-07-24 17:49:55 发布
阅读量4.9k 收藏 4
点赞数 3
分类专栏： 站长技术交流
本文链接：https://blog.csdn.net/q906270629/article/details/104988956
版权

今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在浏览器中居然无效, 试了好几个视频网站的视频都不能全屏。

问题：

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

答案：

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

例子:

加上属性前：

<iframe name= "iFrame1 " width=100% height=450 src= "http://www.quanbaike.com/tool/m3u8/?url=http://aldirect.hls.huya.com/huyalive/94525224-2460685774-10568564925062447104-2789253840-10057-A-0-1_1200.m3u8" scrolling= "auto " frameborder= "0 "> </iframe>

加上属性后：

<iframe name= "iFrame1 " width=100% height=450 src= "http://www.quanbaike.com/tool/m3u8/?url=http://aldirect.hls.huya.com/huyalive/94525224-2460685774-10568564925062447104-2789253840-10057-A-0-1_1200.m3u8" allowfullscreen  scrolling= "auto " frameborder= "0 "> </iframe>

 

于飞SEO
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
h5 video属性 视频不全屏播放/自动播放
weixin_45468557的博客
06-30 1000
Android ISO 微信打开网页视频不全屏/自动播放： <video poster="xxx" src="xxx" controls="controls" autoplay="autoplay" width="100%" webkit-playsinline='true' playsinline='true' x5-playsinline='true' ></video> 不全屏播放 通常设置以下两个属性就可以了 webkit-playsinline=‘true’
解决Html iframe 内嵌video标签导致视频无法全屏展示的问题
最新发布
Wang_zhe_的博客
03-15 1363
iframe内嵌video，视频无法全屏展示
解决iframe不能全屏的问题
YoungC
09-15 1817
<iframe style="width:98%;height: 450px;" src='{$vo.url}' frameborder=0 allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> </iframe> allowfullscreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”tru.
H5 iframe标签内video无法全屏
qq_21479345的博客
04-13 1479
解决方法：为iframe添加allowfullscreen属性，例： <iframe src="xxx.html" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" > </iframe>
iframe嵌套视频，视频全屏用不了
小武的博客
01-16 4257
 应在iframe中加入  allowfullscreen="true" &lt;iframe id='orbitIframe' [src]="dataSearchUrl|safe" width="100%" height="100%" frameborder="0" align="center" allowfullscreen="true"&gt;
html 使用iframe引入视频但无法全屏播放，问题解决
lucky_Lzx的博客
07-24 3929
今天在写项目的时候，要引入一些宣传视频，要求用iframe引，由于是外网的网站要开VPN来搞，就不上图了。 简单说一下，把路径引到了iframe的src里，视频开VPN可以正常访问，但无法进行全屏显示，原来的代码如下 <iframe :src="item.url" id = "video_lx" ></iframe> 这样做，就无法去点击全屏，那怎么办呢，当然是去百度偷代码啊 做出了一些修改 <iframe webkitallowfullscreen="" mozal
uniapp B站iframe嵌入APP及视频全屏不横屏问题处理 Android端
qq_55460954的博客
07-24 1825
视频界面设置允许横屏，通过onResize监听窗口尺寸变化(全屏生效时，标题栏会隐藏，导致窗口高度会增加；退出全屏时，标题栏会出现，导致窗口高度会减小)，将界面强制设置横屏或竖屏。效果及问题：手机竖屏锁定激活也能横屏，取消全屏后会回到竖屏。只适用于Android 端，iOS要使用其他方案，测试用的是Android 12。
h5- iframe完美嵌套的使用
xiaokai123_的博客
07-10 1万+
没啥可讲的直接上代码吧。&lt;!DOCTYPE html&gt;&lt;html&gt;  &lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;    &lt;titl
vue用iframe播放海康视频
weixin_42674490的博客
02-28 3063
由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。 1.在public地址下添加iframe.html 2.iframe.html <!doctype html> <html> <head> <title></
videojs播放器iframe无法全屏
sh2018的博客
02-12 1409
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 .
Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法
热门推荐
蜗牛的专栏
08-05 2万+
今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新版本对权限的控制都越来越严格精细的原因按钮点了没反应, 始终不能全屏解决办法也很简单, 就是增加一个属性 allowfullscreen 就行了例子:<iframe src="https://v.qq.
iframe中资源全屏按钮失效（如视频）
菜菜我是谁的博客
05-17 939
项目场景： a项目中嵌入b项目 问题描述： b项目中有视频播放器在a项目中无法使用全屏 解决方案： <iframe id="myIframe" :src="sourceSrc" allowfullscreen="true"></iframe> 在iframe标签中加入allowfullscreen的属性 ...
解决 iframe 弹框蒙板显示不了全屏
月来better
02-03 1752
解决 iframe 弹框蒙板显示不了全屏问题
网页内嵌的iframe内部无法调用上层网页的全屏功能
Leemeea的博客
06-13 508
主要添加一个 allowfullscreen="true" 属性 原代码 <iframe src="url" width="100%" height="600px;" style="border:none;"></iframe> 添加后的代码 <iframe src="url" width="100%" height="600px;" style="border:none;" allowfullscreen="true"></iframe> ...
解决Iframe无法全屏问题
qq_36701692的博客
08-02 1万+
代码如下 <iframe width="100%" height='100%' frameborder='0' align='center' allowfullscreen='true' allow="autoplay" id='iframe' ></iframe> 其中属性为全屏属性 allowfullscreen='true' ...
摄像头视频画面接入，使用iframe标签嵌入到页面中（海康威视、萤石）
huangfuyk.的博客
02-19 7342
有的时候，我们需要获取到摄像头的实时监控视频，并且把画面嵌入到页面当中，此时，可以使用萤石平台实现我们的需求。 1、进入到该平台，有一系列详细的步骤及参数介绍。 例： url：监控地址，包含验证码、设备序列号、通道号、清晰度、播放类型 autoplay：1-开启自动播放，未显示字段-关闭自动播放 audio：1-开启音频，未显示字段-关闭音频 accessToken：访问令牌，播放监控地址的必要参数 live后缀：预览 rec后缀：回放 autoplay：1-开启自动播放，未.
关于Iframe 与视频播放器显示被遮住的问题/Wbox自定义关闭函数
weixin_34293059的博客
01-25 430
第一：关于视频播放器遮住的问题  父页面是视频播放器页面，开窗wbox来选择即将播放的视频文件，发现，开窗页面部分被播发器遮住，模仿youku，播放视频时，点击登录开窗的方式，修改自己的问题。 解决方案：开窗时，将视频播放器Div隐藏，开窗操作，关窗后，再将父页面Div显示。期间使用到了，自定义wbox关闭函数，见下面总结. 第二：Wbox自定义关闭函数 找到 wbox.js中的下面这段代...
使用iframe标签嵌入网页后怎么解决留白
05-31
当使用 iframe 标签嵌入网页时，可能会出现留白的情况。这是因为 iframe 默认情况下具有一定的内边距和外边距。 为了解决这个问题，您可以在 iframe 标签中添加以下属性： ```html <iframe src="header.html" frameborder="0" scrolling="no" width="100%" style="display: block; border: none; margin: 0; padding: 0;"></iframe> ``` 其中，style 属性包含了以下样式： - `display: block;`：将 iframe 元素设置为块级元素，使其与其他块级元素（如 div）相同。 - `border: none;`：将 iframe 边框设置为无，以消除默认的边框。 - `margin: 0;`：将 iframe 外边距设置为 0，以消除默认的外边距。 - `padding: 0;`：将 iframe 内边距设置为 0，以消除默认的内边距。 通过添加这些样式，您可以消除 iframe 的留白，使其与其他元素对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

于飞SEO

如果对你有帮助，就是我的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值