element.requestFullscreen 让任意元素占满整个屏幕——不只是视频，图片、画布、图表容器都能全屏展示。document.exitFullscreen 退出，document.fullscreenElement 拿到当前全屏元素。因为不同浏览器前缀曾不统一，实际代码里常见带 webkit/ms 前缀的兼容写法。
全屏是用户感知较强的行为，浏览器要求必须由用户手势触发（点击），脚本自动调用会被拒绝。进入全屏后默认仍显示浏览器自带控件，可用 ::backdrop 伪元素定制全屏背景，也可以通过 :fullscreen 伪类给元素加全屏专属样式。
<style> .stage { width: 300px; height: 170px; background: linear-gradient(45deg,#4a9eff,#39c5cf); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; } .stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; font-size: 28px; } .stage:fullscreen::backdrop { background: rgba(0,0,0,.85); } </style> <div class="stage" onclick="var el=this; if(!document.fullscreenElement){ el.requestFullscreen(); } else { document.exitFullscreen(); }">点击进入全屏，再点退出</div>