Wie aktiviere ich mit JS bei einem <div>-Element den Vollbildmodus?
Hallo Leute,
Ich habe mich im Internet ein bisschen umgesehen, wie man mit JS ein <video>-Element in den Vollbildmodus schaltet. Folgendes Beispiel habe ich gesehen:
var elem = document.getElementById("name-of-element");
function activateFullscreen() {
if(elem.requestFullscreen) {
elem.requestFullscreen();
} else if(elem.mozRequestScreen) {
elem.mozRequestScreen();
} else if(elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if(elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
Bei einem <video>-Tag funktioniert das Ganze auch. Wenn ich es jedoch mit einem <div>-Container probiere, funktioniert es nicht. Kann mir jemand erklären wie das funktioniert?
Danke
3 Antworten
![](https://images.gutefrage.net/media/user/VeryBestAnswers/1569701765554_nmmslarge__0_0_1000_1000_ae38d2d21f6e3a10a60fbb9429d0db71.png?v=1569701766000)
Das funktioniert bei jedem Element. Du musst allerdings darauf achten, dass die Fullscreen-API Anfragen nur erlaubt, wenn sie während eines Events (z.B. einem Mausklick auf einen "Vollbild"-Button) erlaubt.
Dies soll verhindern, dass eine Website den Vollbildmodus erzwingt und den Nutzer so daran hindert, die Seite zu schließen.
Eine weitere Einschränkung ist, dass, falls sich das Element in einem <iframe> befindet, dieses die Eigenschaft "fullscreen" aktiviert sein muss.
![](https://images.gutefrage.net/media/user/VeryBestAnswers/1569701765554_nmmslarge__0_0_1000_1000_ae38d2d21f6e3a10a60fbb9429d0db71.png?v=1569701766000)
Wird in der Konsole eine Fehlermeldung angezeigt?
![](https://images.gutefrage.net/media/default/user/12_nmmslarge.png?v=1551279448000)
Uncaught TypeError: Cannot read property 'requestFullscreen' of null
at HTMLButtonElement.fullscreenButton.onclick (player.js:27)
![](https://images.gutefrage.net/media/user/VeryBestAnswers/1569701765554_nmmslarge__0_0_1000_1000_ae38d2d21f6e3a10a60fbb9429d0db71.png?v=1569701766000)
Das heißt, das Element ist null, und null hat keine Methode namens 'requestFullscreen'
![](https://images.gutefrage.net/media/default/user/12_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/user/Erzesel/1497339133085_nmmslarge__0_524_1080_1080_4b38ff31970de3b94deb6a27ca8a8f01.jpg?v=1497339133000)
Wenn Du das ganze auch noch mit einem Autoclic im script kombinierst ...
document.getElementById("id").click()
![](https://images.gutefrage.net/media/default/user/14_nmmslarge.png?v=1551279448000)
Für DIV-Elemente ist kein Fullscreen-Modus vorgesehen. Das geht nur für bestimmte Elemente wie eben <video> oder <body>. Bzw. per Definition:
nur Elemente im Top-Level Dokument oder in einem <iframe> mit dem Attribut allowfullscreen können in den Vollbildmodus wechseln.
https://developer.mozilla.org/de/docs/Web/API/Element/requestFullScreen
Welche Fehlermeeldung steht denn in der JS-Konsole?
![](https://images.gutefrage.net/media/user/VeryBestAnswers/1569701765554_nmmslarge__0_0_1000_1000_ae38d2d21f6e3a10a60fbb9429d0db71.png?v=1569701766000)
Das hast du falsch verstanden. Normalerweise sind alle Elemente im Top-Level Dokument, außer Elemente in einem eingebetteten SVG-Element, <iframe>, <object> oder Elemente, die mit .remove() oder .removeChild() entfernt wurden.
![](https://images.gutefrage.net/media/default/user/14_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/default/user/12_nmmslarge.png?v=1551279448000)
Uncaught TypeError: Cannot read property 'requestFullscreen' of null
at HTMLButtonElement.fullscreenButton.onclick (player.js:27)
![](https://images.gutefrage.net/media/user/RakonDark/1552185525294_nmmslarge__0_0_160_160_7f828fad18ee7edb96b8daceedaeeadb.png?v=1552185525000)
wie der Kollege schon sagt, du kannst das auf Body machen
var elem = document.body;
aber nicht auf elemente die innerhalb liegen (ausser halt die ausnahmen .)
ein workaround ist , body fullscreen , dann div dem body anpassen .
div height , width 100%
![](https://images.gutefrage.net/media/user/VeryBestAnswers/1569701765554_nmmslarge__0_0_1000_1000_ae38d2d21f6e3a10a60fbb9429d0db71.png?v=1569701766000)
Das heißt übersetzt:
Das Objekt null besitzt keine Methode namens 'requestFullscreen'.
Du solltest vielleicht mal überprüfen, dass das Element, für das du 'requestFullscreen' aufrufst, auch tatsächlich gültig ist.
![](https://images.gutefrage.net/media/user/Erzesel/1497339133085_nmmslarge__0_524_1080_1080_4b38ff31970de3b94deb6a27ca8a8f01.jpg?v=1497339133000)
Ja, bei mir wird auf einen Button geklickt und dann der Vollbildmodus von einem <div>-Container aktiviert.