iframe嵌入页面时被嵌入页面内视频不能全屏
今天没事弄着玩突然发现一个问题，就是iframe嵌入页面时，被嵌入页面里的视频不能全屏播放，但是找到了解决方法，就是加入allowfullscreen这个东西，实现后发现挺简单的，大家可以复制以下demo...
今天没事弄着玩突然发现一个问题，就是iframe嵌入页面时，被嵌入页面里的视频不能全屏播放，但是找到了解决方法，就是加入allowfullscreen这个东西，实现后发现挺简单的，大家可以复制以下demo去测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>76543</title>
</head>
<body>
<div>嵌入的视频大家不用看</div>
<iframe src="//player.bilibili.com/player.html?aid=74964956&bvid=BV1pE411q7FU&cid=135151695&page=349" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="600" width="100%"> </iframe>
<div>嵌入的网页，发现在谷歌浏览器上嵌入网页内的视频不能全屏，其他浏览器未测试</div>
<div style="height: 100vh;width: 100%;">
<iframe align="center" height="570" src="https://www.bilibili.com/video/BV1pE411q7FU/" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto" width="100%" height="100vh"></iframe>
</div>
<div>可以正常全屏了</div>
<div style="height: 100vh;width: 100%;">
<iframe align="center" height="570" src="https://www.bilibili.com/video/BV1pE411q7FU/" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto" width="100%" height="100vh" allowfullscreen ></iframe>
</div>
</body>
</html>
- 发表于 2020-07-22 17:55
- 阅读 ( 596 )
- 分类：web前端开发
