Programmatic fullscreen controls

You can use the fullscreen API to programmatically control the fullscreen status from your own components.

In this example we are using the fullscreen API to implement our own fullscreen button.

By setting the viewer.fullscreen property to true, the viewer will go into fullscreen mode. This mode can be disabled by setting the viewer.fullscreen property to false.

caution

Fullscreen mode is not fully supported on gallery mode, on mobile.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Live Editor

function Example() {
  const viewer = useRef(null);

  return (
    <>
      <button
        style={{
          position: "absolute",
          zIndex: 5,
          margin: "12px",
        }}
        onClick={e => (viewer.current.fullscreen = true)}
      >
        Toggle fullscreen
      </button>

      <cylindo-viewer
        ref={viewer}
        customer-id="5098"
        code="VARIABLE PLUS TEST"
        controls=""
      >
        <cylindo-360-frame frame="5" />
      </cylindo-viewer>
    </>
  );
}