Avoid hiding divs in fullscreen?

Questions
1

I’ve just created a very rough fullscreen button with a div (I think that is easier to deal with divs than with regular Babylon buttons)

But when you go fullscreen it becomes hidden.

Is there any chance to avoid this behaviour? Thank you in advance.

2

You would have to make a container and apply your own fullscreen api code to that, rather than using the built-in fullscreen.

<div> // fullscreen on this
    <canvas>
    <div></div> // this will display in fullscreen
</div>
2 Likes
3

Thank you I’ll provide a working sample for future readers:

2 Likes
4

How could I add an image to the button? Similar to youtube full screen?

5

You may do it with usual CSS styling.
Here is a quick example - https://www.babylonjs-playground.com/#AUTZQ4#5

1 Like
6

Amazing, exactly what I needed. But can I add hover properties to this element?

I want to make it grow like this: How To Zoom on Hover with CSS

7

The easiest way is to add :hover rule to your CSS.

1 Like
8

This also is the solution to using xr-dom-overlay functionality.