CODEWITHSUNDEEP
javascripthtml
user3753641
user3753641

Reputation: 29

Javascript fullscreen api

Can someone please explain how the following code works.

Element refers to the video while fullscreen is a link on the page.

I am having trouble understanding the if statements

var element = document.getElementById('element');
var fullscreen = document.getElementById('fullscreen');

fullscreen.addEventListener('click', function () {
    if (element.requstFullscreen) {
        element.requstFullscreen();
    } else if (element.webkitrequestFullscreen) {
        element.webkitrequestFullscreen();
    };
});

Upvotes: 1

Views: 91

Answers (2)

PurkkaKoodari
PurkkaKoodari

Reputation: 6809

if (element.requestFullscreen) {
    element.requestFullscreen();

If the element object contains something called requestFullscreen, call it (there was a typo which I fixed). This is the standard way to go full-screen via Javascript. 

} else if (element.webkitrequestFullscreen) { 
    element.webkitrequestFullscreen();
}

If it does not, but contains something called webkitrequestFullscreen, call that. This is how you do it in older Chrome/Safari.

And by the way, a more reliable way to check existence of functions is typeof:

if (typeof element.requestFullscreen == "function") {

Upvotes: 1

Alexandru Severin
Alexandru Severin

Reputation: 6218

in full screen, when you click:

if element has attribute requestFullscreen, then requestFullscreen() will be called, otherwise, webkitrequestFullscreen() will be called.

Thats the best I can say without seeing requestFullscreen() and webkitrequestfullscreen().

Upvotes: 0

Related Questions