MoreLesson 164Free preview

Fullscreen Video

This lesson is part of How To · All levels

Summary

This lesson discusses how to display videos in full-screen mode via a special button. The browser provides a Fullscreen API with the requestFullscreen method on the video element and exitFullscreen to exit. For security reasons, fullscreen requests generally have to come from user actions such as a button click.

Key points

Call video.requestFullscreen() from the user click handler
Use document.exitFullscreen() to exit the full screen mode
Listen to the fullscreenchange event to update the button label
Include controls attributes to the video so users can still play and set the sound

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.