Full screen on the button in the frame

Question

How to call fullscreen mode in frame on my site? Thank you...

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

https://stackoverflow.com/questions/33768509/how-to-make-an-iframe-to-go-fullscreen-on-a-button-click — Adam H, Jul 05 '18 at 15:42

score 0 · Answer 1 · answered Jul 05 '18 at 18:04

You need to request user permission to full screen i believe. This MDN post goes into more detail. If you check caniuse.com you'll see that theres a lot of partial support, be sure to check the caveats.

According to MDN you need to call requestFullScreen on the element.

Some HTML:

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

Some JS for it:

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

Be sure to go through the docs though, as it mentions some interesting CSS caveats between Gecko and Webkit browsers.

caveat: fullscreen api does not work in iOS and android as of january 3rd 2019 — Stephen Tetreault, Jan 03 '19 at 16:21

score -1 · Answer 2 · answered Dec 17 '20 at 15:05

-1

The :fullscreen CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode.

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

answered Dec 17 '20 at 15:05

Ramy Mohamed

236
1
5
18

While this is true, that isn't what the question is asking. – Quentin Dec 17 '20 at 15:16

Full screen on the button in the frame

2 Answers2