Fullscreen & Screen Orientation APIs0%
Web Audio & MediaStream APIs Basics

Fullscreen & Screen Orientation APIs

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Fullscreen & Screen Orientation APIs in Modern JavaScript

For multimedia players, presentation tools, dashboards, and mobile web games, engaging the user requires removing browser chrome (toolbars, address bars) and managing display layout. The Fullscreen API and Screen Orientation API provide programmatic control over the viewport display mode.

1. The Fullscreen API

The Fullscreen API allows any HTML element—or the entire document—to expand to fill the entire physical screen.

Entering & Exiting Fullscreen:

JavaScript
const videoPlayer = document.querySelector('#video-container');
const fullscreenBtn = document.querySelector('#btn-fullscreen');
 
async function toggleFullscreen() {
// If not currently in fullscreen, request it
if (!document.fullscreenElement) {
try {
// Must be triggered by a direct user gesture (click/keypress)!
await videoPlayer.requestFullscreen();
console.log('Entered Fullscreen mode.');
} catch (err) {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
}
} else {
// Exit fullscreen
await document.exitFullscreen();
console.log('Exited Fullscreen mode.');
}
}
 
fullscreenBtn.addEventListener('click', toggleFullscreen);

2. Fullscreen Event & Pseudo-Class

Listening to Changes:

JavaScript
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('Active fullscreen element:', document.fullscreenElement);
fullscreenBtn.textContent = 'Exit Fullscreen';
} else {
console.log('Returned to normal windowed view.');
fullscreenBtn.textContent = 'Enter Fullscreen';
}
});

Styling with CSS :fullscreen Pseudo-Class:

CSS
/* Style element specifically when it is in fullscreen mode */
#video-container:fullscreen {
width: 100vw;
height: 100vh;
background-color: black;
}
 
/* Style child controls during fullscreen */
#video-container:fullscreen .controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}

3. The Screen Orientation API

Mobile web applications often require locking the display to landscape (for video/gaming) or portrait:

JavaScript
// Inspect current orientation
console.log('Orientation Type:', screen.orientation.type); // 'portrait-primary', 'landscape-primary'
console.log('Orientation Angle:', screen.orientation.angle); // 0, 90, 180, 270
 
// Listen for device orientation rotations:
screen.orientation.addEventListener('change', () => {
console.log(`Orientation rotated to: ${screen.orientation.type}`);
});
 
// Locking orientation (Requires Fullscreen mode on mobile!):
async function lockToLandscape() {
try {
await document.documentElement.requestFullscreen();
await screen.orientation.lock('landscape');
console.log('Screen locked to landscape mode.');
} catch (err) {
console.warn('Orientation lock failed or unsupported:', err);
}
}
 
function unlockOrientation() {
screen.orientation.unlock();
}

4. Security Requirement: User Gesture Gating

To prevent malicious websites from hijacking user screens, requestFullscreen() strictly requires a transient user gesture (e.g. click or key down). Calling element.requestFullscreen() automatically inside setTimeout() or on page load throws a TypeError: Permissions check failed.

Interactive Quiz

Practice Quiz

Question 1
What property on the document object indicates which element is currently expanded to fullscreen mode?
Question 2
Why will calling element.requestFullscreen() immediately upon page load fail?
Question 3
What CSS pseudo-class matches elements that are currently displayed in fullscreen mode?
Question 4
On mobile devices, what must typically occur before calling screen.orientation.lock('landscape')?
Question 5
How do you exit fullscreen mode programmatically?
Next Lesson

Web Audio & MediaStream APIs Basics

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Geolocation, Clipboard & Device APIsWeb Audio & MediaStream APIs Basics

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext