Fullscreen API

// Enter fullscreen
async function enterFullscreen() {
  const element = document.getElementById('videoPlayer');
  
  try {
    await element.requestFullscreen();
    console.log('Entered fullscreen');
  } catch (error) {
    console.error('Failed to enter fullscreen:', error);
  }
}

// Exit fullscreen
async function exitFullscreen() {
  try {
    await document.exitFullscreen();
    console.log('Exited fullscreen');
  } catch (error) {
    console.error('Failed to exit fullscreen:', error);
  }
}

// Check if in fullscreen
const isFullscreen = document.fullscreenElement !== null;

// 🎯 Must be triggered by user action (click, key press)

// Listen for fullscreen changes
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('Entered fullscreen');
    // Update UI (hide controls, etc.)
  } else {
    console.log('Exited fullscreen');
    // Restore UI
  }
});

// Complete example: Video player
const video = document.getElementById('myVideo');
const fullscreenBtn = document.getElementById('fullscreenBtn');

fullscreenBtn.addEventListener('click', async () => {
  if (!document.fullscreenElement) {
    await video.requestFullscreen();
    fullscreenBtn.textContent = 'Exit Fullscreen';
  } else {
    await document.exitFullscreen();
    fullscreenBtn.textContent = 'Fullscreen';
  }
});

// User can also press ESC to exit
// The event will still fire!

// 🎯 Common use: Video players, games, presentations