- Instant help with your JavaScript coding problems

Play video in fullscreen with vanilla JavaScript

by Mike
Question:
How to play video in fullscreen with vanilla JavaScript?
Answer:
const vid = document.getElementById('video-id');
vid.requestFullscreen();
Description:

If you want to allow site visitors to watch a video on your site in full-screen mode you can simply achieve this by calling the requestFullscreen method on the video element.

The requestFullscreen() method asks the user agent to place the specified element into full-screen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a Promise which is resolved once full-screen mode has been activated.

Reference:
requestFullscreen reference
Share "How to play video in fullscreen with vanilla JavaScript?"
Related snippets:
Tags:
video, fullscreen, javascript, browser
Technical term:
Play video in fullscreen with vanilla JavaScript
Trending articles
Fix 'React' refers to a UMD global, but the current file is a moduleFix the object passed as the value prop to the Context provider changes every renderFix the 'React' must be in scope when using JSX errorHow to run useEffect only once in ReactFix the React 18: Hydration failed because the initial UI does not match errorFix npm ERR! enoent ENOENT: no such file or directory errorFix the ReactDOM.render is no longer supported in React 18Fix the TypeError: MiniCssExtractPlugin is not a constructorSolving the Uncaught SyntaxError: Cannot use import statement outside a moduleRemove element from an array
Trending snippets
Remove accents from a string in JavaScriptGenerate random date with JavaScriptDetect escape key press in JavaScriptConvert snake case to camel case in JavaScriptConvert camel case to snake case in JavaScriptSolving the Error [ERR_REQUIRE_ESM]: require() of ES Module not supportedConvert a string to sentence case in JavaScriptSolving the Error: Must use import to load ES ModuleDetect fullscreen mode with JavaScriptDetect Ctrl+C and Ctrl+V using JavaScriptConvert string to pascal case in JavaScriptRemove emojis from a string with JavaScriptGet selected option from select using JavaScriptRemove protocol from URL with JavaScriptReplace line break with br in JavaScriptGet yesterday's date in JavaScriptAdd class to parent element in JavaScriptReplace spaces with dashes in JavaScriptGet the value of selected radio button in JavaScriptCount the number of lines in a string in JavaScript
Network articles
Solving the stylesheet not loaded because of MIME-typeFix the *.ps1 cannot be loaded because running scripts is disabled on this systemSave request to a file in PostmanLocate a substring within a string in PHPUse Sass Nesting with multiple classesCreate transition with TailwindCSSHow to use calc() in TailwindCSSDisable tooltip in VS CodeExclude folders from search in VS CodeConvert Unix timestamp to human readable date in MySQLGet current year in MySQLChange indentation in VS CodeGo to line in VS CodeDisable text selection with CSSBackup only certain rows from MySQL databaseSkip tables in MySQL backupPHP array lengthConvert PHP string to int valueCreate mailto link with pre-populated contentSet custom cursor in CSS
Quick fix
Fix: Require statement not part of import statement Fix navigator.clipboard is undefined