कैसे फुलस्क्रीन करें

जैसे JavaScript का उपयोग करके फुलस्क्रीन विंडो बनाना सीखें。

फुलस्क्रीन विंडो

एलेमेंट को फुलस्क्रीन मोड में देखने के लिए JavaScript कैसे इस्तेमाल करें。

वीडियो को फुलस्क्रीन मोड में खोलने के लिए बटन पर क्लिक करें:

आप खुद सामने पर प्रयोग करें

फुलस्क्रीन वीडियो

एलेमेंट को फुलस्क्रीन में खोलने के लिए, हम इस्तेमाल करते हैं element.requestFullscreen() विधि:

इस्टेंस

<script>
/* फुलस्क्रीन में दिखाने के लिए किस एलेमेंट को लेना है (इस उदाहरण में वीडियो): */
var elem = document.getElementById("myvideo");
/* जब openFullscreen() फ़ंक्शन चलाया जाता है, वीडियो को फुलस्क्रीन में खोला जाता है. */
ध्यान दें, हमें विभिन्न ब्राउज़रों के लिए प्रीफ़िक्स समेटना होगा क्योंकि वे अभी तक requestFullscreen विधि का समर्थन नहीं करते */
function openFullscreen() {
  यदि (elem.requestFullscreen) {
    elem.requestFullscreen();
  } अन्यथा यदि (elem.webkitRequestFullscreen) { /* सैफारी */
    elem.webkitRequestFullscreen();
  } अन्यथा यदि (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

आप खुद सामने पर प्रयोग करें

फुलस्क्रीन दस्तावेज़

पूरे पृष्ठ को फुलस्क्रीन में खोलने के लिए, इस्तेमाल करें document.documentElement के स्थान पर document.getElementById("element")。

इस उदाहरण में, हम एक बंद फ़ंक्शन का उपयोग करते हैं ताकि फुलस्क्रीन से बाहर निकल सके:

इस्टेंस

<script>
/* documentElement (<html>) पृष्ठ को पूर्ण स्क्रीन प्रदर्शित करने के लिए प्राप्त करना */
var elem = document.documentElement;
/* पूर्ण स्क्रीन देखना */
function openFullscreen() {
  यदि (elem.requestFullscreen) {
    elem.requestFullscreen();
  } अन्यथा यदि (elem.webkitRequestFullscreen) { /* सैफारी */
    elem.webkitRequestFullscreen();
  } अन्यथा यदि (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* पूर्ण स्क्रीन से बाहर निकलना */
function closeFullscreen() {
  यदि (document.exitFullscreen) {
    document.exitFullscreen();
  } अन्यथा यदि (document.webkitExitFullscreen) { /* सैफारी */
    document.webkitExitFullscreen();
  } अन्यथा यदि (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

जब पृष्ठ पूर्ण स्क्रीन मोड में है, तो आपको आगे भी CSS के द्वारा पृष्ठ शैली सेट कर सकते हैं:

इस्टेंस

/* सैफारी */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* स्टैंडर्ड सिंटैक्स */
:fullscreen {
  background-color: yellow;
}

आप खुद सामने पर प्रयोग करें

संबंधित पृष्ठ

HTML DOM संदर्भ ग्रंथःrequestFullscreen() विधि

HTML DOM संदर्भ ग्रंथःexitFullscreen() विधि

HTML DOM संदर्भ ग्रंथःdocumentElement विधि