全屏显示在框架中的按钮上

Question

如何在我的网站框架内调用全屏模式？谢谢...

<iframe width='640' height='360' src='https://roundme.com/embed/11663/28535' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Answer 1

在css部分中添加

<style type="text/css">
  iframe{
   width: 100%;
   height: 100%;
   position: absolute;
  }

Answer 2

我认为您需要请求用户权限才能全屏显示。 This的MDN帖子会更详细。如果您访问caniuse.com，您会看到部分支持，请务必检查警告。

根据MDN，您需要在元素上调用requestFullScreen。

一些HTML：

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

一些JS：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

但是请务必仔细阅读文档，因为它提到了Gecko和Webkit浏览器之间的一些有趣的CSS警告。

Answer 3

：fullscreen CSS伪类选择器用于选择和设置以全屏模式显示的元素的样式。

https://tympanus.net/codrops/css_reference/fullscreen/