Tạo cửa sổ toàn màn hình (Fullscreen) với JavaScript

Sử dụng requestFullscreen() (và tiền tố vendor) để hiển thị element toàn màn hình.

Ví dụ

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       display: block;       padding:10px;       margin:10px;       background-color: rgb(81, 0, 128);       border:none;       color:white;    } </style> <body> <h1>Fullscreen Window với JavaScript</h1> <button class="openVideo">Mở Video toàn màn hình</button> <video width="500px" controls id="minimizedVideo"> <source src="https://www.videvo.net/videvo_files/converted/2015_04/preview/Ocean_Waves_slow_motion_videvo.mov44965.webm"> </video> <h2>Nhấn nút để mở video toàn màn hình</h2> <script>    document.querySelector('.openVideo').addEventListener('click',fullscreenVideo);    var elem = document.getElementById("minimizedVideo");    function fullscreenVideo() {       if (elem.requestFullscreen) {          elem.requestFullscreen();       }       else if (elem.mozRequestFullScreen) {          elem.mozRequestFullScreen();       }       else if (elem.webkitRequestFullscreen) {          elem.webkitRequestFullscreen();       }       else if (elem.msRequestFullscreen) {          elem.msRequestFullscreen();       }    } </script> </body> </html>

Kết quả

Video phát toàn màn hình khi nhấn nút, nhấn Esc để thoát.