How to enter Full-Screen Mode with JavaScript - Fullscreen API Tutorial

In this video tutorial I'll be showing you how to use the JavaScript Fullscreen API which will allow your website to enter full-screen mode programmatically.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#javascript #webdev #dcode

[ahmedbelloula]

i used it with reactjs it works perfectly, thank you for keeping it so simple

[AhmedMeklad]

i like this method because its work with vuejs without problems at all ... thanks man

[ahora]

he is gonna make the rarest videos always. XD. love him

[WIBEDRILLMusic]

Was helpful for my react app. I did the same in the public/index.html. Thanks for always helping me out.

[abusayed]

Easiest explanation !! keep going .

[weirdbradleycomedy]

Very informative!! Totally using this for now on :)

[benimampunina]

I use it with angular it works correctly, Thamks

[mithilanavishka]

Hi I have struggled in One point Of Full screen, Can we call a function when click default close button of full screen mode, can You tell me, how could I catch that event?
I want to Hide Expand button and show Collapse button when come to Full Screen Mode --> 1
and I want to hide Collapse button and show Expand Button When come to normal screen --> 2

Problem is 2, I can't understand where I need to write that function

Please Advise me.
Thanks In Advanced.

[noxdacker]

thank you very it works!!!! how could i force "landscape view" for mobile browsers?

[ravilpatel]

How can I hide this myBox id untill the user comes to full screen mode and hide if the user goes off the full screen? Thanks for the video....you are unique amongst all!!!

[RudiLouw]

Thanks for a great tutorial. I have a difficult question - How do I get this to work on an iPhone mobile device. It works on iPad and desktop, but does not work in my iPhone XR? Would be fab if you had a solution as I need elements of my site to fire up in full screen on all devices.

[igorbondarenko]

Thanks for the tutorial. Do you know what a situation in the safari browser? Does it support the full screen api?

[RadiantX]

I want to go full screen automatically on page load. Please help

[wilbertgo]

Hi there.. is there anyway to get the webpage fullscreen on load?

[youtischia]

Nice video. Any chance of video on how kiosk mode is different from fullscreen mode ? They are not the same.

[formanhossain]

there have any way to see fullscreen automatically when site will be

[shulavkarki]

how to include for specific time?.
full screen mode for fix time?
It would be very helpful.
Thankyou

[ridhwaans]

I am getting the error Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
How do you get past that?

[jkmediacromer]

How can you do this youtube api full screen video background, thanks

[tomekipro]

I have question: is there some way to skip user action to working proper (I try "window.onload" but not working, something do, but not fullscreen)