Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript के साथ फुलस्क्रीन विंडो कैसे बनाएं?

उदाहरण

JavaScript का उपयोग करके फुलस्क्रीन विंडो बनाने के लिए, निम्न कोड का उपयोग करें:

<!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 with JavaScript Example</h1> <button class="openVideo";">Open Video in Fullscreen Mode</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>Click on the above button to open it in fullscreen</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>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:

JavaScript के साथ फुलस्क्रीन विंडो कैसे बनाएं?

"Open Video in Fullscreen Mode" बटन पर क्लिक करने पर:

JavaScript के साथ फुलस्क्रीन विंडो कैसे बनाएं?

  1. JavaScript से ऑटोकंप्लीट कैसे बनाएं? JavaScript से ऑटोकंप्लीट कैसे बनाएं?

    फॉर्म में ऑटोकंप्लीशन (स्वचालित पूर्ण) बनाने का कोड नीचे दिया गया है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <style> * { box-sizing: border-box; } body { margin: 10px; padding: 0px; fo

  1. JavaScript से टेक्स्ट टॉगल करें JavaScript से टेक्स्ट टॉगल करें

    JavaScript का उपयोग करके किसी एलिमेंट का टेक्स्ट कंटेंट दो स्थितियों के बीच टॉगल करना एक सामान्य UI पैटर्न है (जैसे अधिक दिखाएं/कम दिखाएं, चालू/बंद)। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> bo

  1. JavaScript से आइकन्स का उपयोग करके एनिमेटेड इफेक्ट कैसे बनाएं? JavaScript से आइकन्स का उपयोग करके एनिमेटेड इफेक्ट कैसे बनाएं?

    आइकन्स का उपयोग करके एनिमेटेड इफेक्ट बनाने के लिए कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style>    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {       font-fa