解决iframe嵌入页面时被嵌入页面内的视频不能全屏

今天没事弄着玩突然发现一个问题,就是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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/833.html