I am creating a web-based interface to a number of internal web applications. They are all embedded in an iframe for access.
At times I need to allow the iframe to go full screen to give an embedded app as much screen space as possible.
What I want to do is have a “close full screen” button when the iframe is full screen. I can overlay one just fine, and functionally this works. But visually, I am challenged with the fact that the apps all have various layouts – so there is no perfect spot to put the close button for all apps. I want the close button to be ideally in the same spot for consistent user experience.
I should add one big condition: this is on a touch screen terminal, and the user does not use a mouse. Otherwise, I would just have any mouse movement to an edge of the screen expose the close button, just like how a full screen web browser in Windows will expose the top UI if the mouse is moved to the top of the screen.
I can imagine several scenarios on how to do this, but am asking here to see if anyone has found a previous UI design pattern to handle this kind of situation.