path: root/files/de/web/api/fullscreen_api/index.html

---
title: Vollbild API
slug: Web/API/Fullscreen_API
tags:
  - API
  - DOM
  - JS
  - Tutorial
  - Vollbild API
translation_of: Web/API/Fullscreen_API
original_slug: Web/API/Vollbild_API
---
<p>{{DefaultAPISidebar("Fullscreen API")}}</p>

<p class="summary">Die <strong><code>Vollbild-API</code></strong> bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.</p>

<div class="note">
<p>Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe <a href="#Prefixing">Vendor Präfixe</a> für Unterschiede zwischen Präfixen und Namen. </p>

<p>Für eine universelle Lösung des Problems siehe <a href="https://github.com/rafrex/fscreen">Fscreen</a>.</p>
</div>

<h2 id="Specification" name="Specification">Aktivieren des Vollbildmodus</h2>

<p>Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.</p>

<p>Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:</p>

<pre class="brush: html">&lt;video controls id="myvideo"&gt;
  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
&lt;/video&gt;
</pre>

<p>Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:</p>

<pre class="brush: js">var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}
</pre>

<h3 id="Anzeige-Schwierigkeiten">Anzeige-Schwierigkeiten</h3>

<p>An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "<code>width: 100%; height: 100%</code>". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "<code>width: 100%; height: 100%;</code>"-CSS-Regel zum entsprechenden Element hinzufügen:</p>

<pre class="brush: css">#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
</pre>

<p>Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.</p>

<h3 id="Benachrichtigung">Benachrichtigung</h3>

<p>Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das <code>document</code>, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das <code>document</code> wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das <code>document</code> in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des <code>document</code> nicht <code>null</code> ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.</p>

<h3 id="Wenn_die_Vollbild-Anfrage_scheitert">Wenn die Vollbild-Anfrage scheitert</h3>

<p>Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein <code>mozfullscreenerror</code>-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.</p>

<div class="note">
<p><strong>Hinweis:</strong> Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. </p>
</div>

<h2 id="Verlassen_des_Vollbildmodus">Verlassen des Vollbildmodus</h2>

<p>Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.</p>

<h2 id="Weitere_Informationen">Weitere Informationen</h2>

<p>Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:</p>

<dl>
 <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
 <dd>Das <code>fullscreenElement</code>-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht <code>null</code> ist, befindet sich das <code>document</code> im Vollbildmodus. Sonst, wenn dieses Attribut <code>null</code> ist, befindet sich das Dokument nicht im Vollbildmodus.</dd>
 <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
 <dd>Das <code>fullscreenEnabled</code>-Attribut gibt an, ob das <code>document</code> aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.</dd>
</dl>

<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Was die Nutzer wissen wollen</h2>

<p>Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit <kbd>ESC</kbd> (oder <kbd>F11</kbd>) verlassen können.</p>

<p>Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  <kbd>Alt</kbd>+<kbd>Tab</kbd>) auch den Vollbildmodus.</p>

<h2 id="Specification" name="Specification">Beispiel</h2>

<p>In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von <kbd>Return</kbd> oder <kbd>Enter</kbd> kann der Nutzer den Vollbildmodus des Videos umschalten.</p>

<p><a href="/samples/domref/fullscreen.html">Live-Beispiel ansehen</a></p>

<h3 id="Watching_for_the_Enter_key">Watching for the <kbd>Enter</kbd> key</h3>

<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p>

<pre class="brush: js">document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);
</pre>

<h3 id="Toggling_fullscreen_mode">Toggling fullscreen mode</h3>

<p>This code is called when the user hits the <kbd>Enter</kbd> key, as seen above.</p>

<pre class="brush: js">function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}
</pre>

<p>This starts by looking at the value of the <code>fullscreenElement</code> attribute on the {{ domxref("document") }} (checking it prefixed with both <code>moz</code>,<code> ms</code>, or <code>webkit</code>). If it's <code>null</code>, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.</p>

<p>If fullscreen mode is already active (<code>fullscreenElement</code> is non-<code>null</code>), we call {{ domxref("document.exitFullscreen()") }}.</p>

<h2 id="Vendor_Präfixe">Vendor Präfixe</h2>

<p>For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use <a href="https://github.com/rafrex/fscreen">Fscreen</a>). Here is the table summarizing the prefixes and name differences between them:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Standard</th>
   <th scope="col">Blink (Chrome &amp; Opera)</th>
   <th scope="col">Gecko (Firefox)</th>
   <th scope="col">Internet Explorer 11</th>
   <th scope="col">Edge</th>
   <th scope="col">Safari (WebKit)</th>
  </tr>
  <tr>
   <td>{{domxref("Document.fullscreen")}}</td>
   <td><code>webkitIsFullScreen</code></td>
   <td><code>mozFullScreen</code></td>
   <td><em>-</em></td>
   <td><code>webkitIsFullScreen</code></td>
   <td><code>webkitIsFullScreen</code></td>
  </tr>
  <tr>
   <td>{{domxref("Document.fullscreenEnabled")}}</td>
   <td><code>webkitFullscreenEnabled</code></td>
   <td><code>mozFullScreenEnabled</code></td>
   <td><code>msFullscreenEnabled</code></td>
   <td><code>webkitFullscreenEnabled</code></td>
   <td><code>webkitFullscreenEnabled</code></td>
  </tr>
  <tr>
   <td>{{domxref("Document.fullscreenElement")}}</td>
   <td><code>webkitFullscreenElement</code></td>
   <td><code>mozFullScreenElement</code></td>
   <td><code>msFullscreenElement</code></td>
   <td><code>webkitFullscreenElement</code></td>
   <td><code>webkitFullscreenElement</code></td>
  </tr>
  <tr>
   <td>{{domxref("Document.onfullscreenchange")}}</td>
   <td><code>onwebkitfullscreenchange</code></td>
   <td><code>onmozfullscreenchange</code></td>
   <td><code>MSFullscreenChange</code></td>
   <td><code>onwebkitfullscreenchange</code></td>
   <td><code>onwebkitfullscreenchange</code></td>
  </tr>
  <tr>
   <td>{{domxref("Document.onfullscreenerror")}}</td>
   <td><code>onwebkitfullscreenerror</code></td>
   <td><code>onmozfullscreenerror</code></td>
   <td><code>MSFullscreenError</code></td>
   <td><code>onwebkitfullscreenerror</code></td>
   <td><code>onwebkitfullscreenerror</code></td>
  </tr>
  <tr>
   <td>{{domxref("Document.exitFullscreen()")}}</td>
   <td><code>webkitExitFullscreen()</code></td>
   <td><code>mozCancelFullScreen()</code></td>
   <td><code>msExitFullscreen()</code></td>
   <td><code>webkitExitFullscreen()</code></td>
   <td><code>webkitExitFullscreen()</code></td>
  </tr>
  <tr>
   <td>{{domxref("Element.requestFullscreen()")}}</td>
   <td><code>webkitRequestFullscreen()</code></td>
   <td><code>mozRequestFullScreen()</code></td>
   <td><code>msRequestFullscreen()</code></td>
   <td><code>webkitRequestFullscreen()</code></td>
   <td><code>webkitRequestFullscreen()</code></td>
  </tr>
 </thead>
</table>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Fullscreen")}}</td>
   <td>{{Spec2("Fullscreen")}}</td>
   <td>Initial version.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>

<p>All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of <code>requestFullscreen()</code>, there is <code>MozRequestFullScreen()</code>.</p>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>15 {{ property_prefix("-webkit") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br>
    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
   <td>11 {{ property_prefix("-ms") }}</td>
   <td>12.10</td>
   <td>5.0 {{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td><code>fullscreenEnabled</code></td>
   <td>20 {{ property_prefix("-webkit") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br>
    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
   <td>11 {{ property_prefix("-ms") }}</td>
   <td>12.10</td>
   <td>5.1 {{ property_prefix("-webkit") }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>28 {{ property_prefix("-webkit") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br>
    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>fullscreenEnabled</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>28 {{ property_prefix("-webkit") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br>
    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{ domxref("Element.requestFullscreen()") }}</li>
 <li>{{ domxref("Document.exitFullscreen()") }}</li>
 <li>{{ domxref("Document.fullscreen") }}</li>
 <li>{{ domxref("Document.fullscreenElement") }}</li>
 <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
 <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
</ul>