ফুলস্ক্রিন কিভাবে করা যায়

কিভাবে JavaScript-এর মাধ্যমে ফুলস্ক্রিন উইন্ডো তৈরি করা যায় শিখুন。

ফুলস্ক্রিন উইন্ডো

কিভাবে JavaScript-এর মাধ্যমে ফুলস্ক্রিন মোডে এলিমেন্টটি দেখা যায়。

ভিডিওকে ফুলস্ক্রিন মোডে খুলতে, বাটনটি ক্লিক করুন:

আপনার নিজের হাতে পরীক্ষা করুন

ফুলস্ক্রিন ভিডিও

এলিমেন্টটিকে ফুলস্ক্রিন মোডে খুলতে, আমরা এইভাবে ব্যবহার করি: element.requestFullscreen() পদ্ধতি:

ইনস্ট্যান্স

<script>
/* ফুলস্ক্রিন মোডে দেখাবের জন্য যে এলিমেন্টটি নির্বাচিত করতে হবে (এই উদাহরণে ভিডিও): */
var elem = document.getElementById("myvideo");
/* openFullscreen() ফাংশন চালু হলে, ভিডিওকে ফুলস্ক্রিন মোডে খুলাতে হবে */
মনে রাখুন, আমরা ভিন্ন ব্রাউজারের প্রিফিক্স সম্মিলিত করতে হবে, কারণ তারা requestFullscreen মথড সমর্থন করে না */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* স্যাফারি */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

আপনার নিজের হাতে পরীক্ষা করুন

ফুলস্ক্রিন ডকুমেন্ট

সমগ্র পৃষ্ঠা ফুলস্ক্রিন মোডে খুলতে, এইভাবে ব্যবহার করুন: document.documentElement বদলে document.getElementById("element")。

এই উদাহরণে, আমরা একটি বন্ধ ফাংশনও ব্যবহার করি যদি ফুলস্ক্রিন বের হওয়ার জন্য:

ইনস্ট্যান্স

<script>
/* documentElement (<html>) পাওয়া এবং ফুলস্ক্রিন দেখান */
var elem = document.documentElement;
/* ফুলস্ক্রিন দেখা */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* স্যাফারি */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* ফুলস্ক্রিন ছেড়ে দিন */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* স্যাফারি */
    document.webkitExitFullscreen();
  } else if (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 মথোদ্দতা