Fullscreen Implementation Guide

CSS-Based Fullscreen

The browser's native Fullscreen API (element.requestFullscreen()) creates a new top-level stacking context that is isolated from the rest of the document. StreamLayer overlays cannot render inside a native fullscreen element — the ad panel, controls, and any other SDK UI will be hidden behind the fullscreen layer.

Instead, implement fake fullscreen — a CSS-based approach that makes the video container fill the entire viewport without leaving the normal DOM flow:

.video-container--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #000;
}

Getting Started — Web SDK setup and feature overview
Advertisement Guide — Ad container setup and containerId configuration

CSS-Based Fullscreen

Related