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

---
title: Fullscreen API
slug: Web/API/Fullscreen_API
translation_of: Web/API/Fullscreen_API
---
<p>{{DefaultAPISidebar("Fullscreen API")}}</p>

<p class="summary">La <strong><code>API Fullscreen</code></strong> provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.</p>

<div class="note">
<p>De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la <a href="#Prefijado">tabla que resume las diferencias de prefijos y nombres</a>.</p>
</div>

<h2 id="Specification" name="Specification">Activando modo de pantalla completa</h2>

<p>Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método <code>requestFullscreen()</code>.</p>

<p>Consideremos este elemento {{ HTMLElement("video") }}:</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>Podemos poner este video en pantalla completa con un script como éste:</p>

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

<h3 id="Diferencias_de_presentación">Diferencias de presentación</h3>

<p>Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "<code>width: 100%; height: 100%</code>". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "<code>width: 100%; height: 100%;</code>" al elemento:</p>

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

<p>Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.</p>

<h3 id="Notificación">Notificación</h3>

<p>Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.</p>

<h3 id="Cuando_la_solicitud_de_pantalla_completa_falla">Cuando la solicitud de pantalla completa falla</h3>

<p>No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento <code>fullscreenerror</code>. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.</p>

<div class="note">
<p><strong>Nota:</strong> Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.</p>
</div>

<h2 id="Saliendo_del_modo_de_pantalla_completa">Saliendo del modo de pantalla completa</h2>

<p>El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase {{ anch("Things_your_users_want_to_know", "Cosas que los usuarios querrán saber") }}. Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.</p>

<h2 id="Otra_información">Otra información</h2>

<p>El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:</p>

<dl>
 <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
 <dd>El atributo <code>fullscreenElement</code> apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.</dd>
 <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
 <dd>El atributo <code>fullscreenEnabled</code> indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.</dd>
</dl>

<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Cosas que los usuarios querrán saber</h2>

<p>Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla <kbd>ESC</kbd> (o <kbd>F11</kbd>) para salir del modo de pantalla completa.</p>

<p>Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, <kbd>Alt</kbd>-<kbd>Tab</kbd>) mientras se está en pantalla completa, también se saldrá de dicho modo.</p>

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

<p>En este ejemplo, se presenta un video en una página web. Presionando la tecla <kbd>Return</kbd> o <kbd>Enter</kbd> el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.</p>

<p><a href="/samples/domref/fullscreen.html">Ver ejemplo en vivo</a></p>

<h3 id="Observando_la_tecla_Enter">Observando la tecla <kbd>Enter</kbd></h3>

<p>Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla <kbd>Enter</kbd>.</p>

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

<h3 id="Cambiando_entre_modo_de_pantalla_completa_y_modo_de_ventana">Cambiando entre modo de pantalla completa y modo de ventana</h3>

<p>Este código es llamado cuando el usuario presiona la tecla <kbd>Enter</kbd>, como se ve arriba.</p>

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

<p>En este código, primero se observa si el atributo <code>fullscreenElement</code> de {{ domxref("document") }} (comprobando si tiene prefijo <code>moz</code>,<code> ms</code>, o <code>webkit</code>). Si es <code>null</code>, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.</p>

<p>Si el modo de pantalla completa está activado (<code>fullscreenElement</code> no es <code>null</code>), llamamos a la función {{ domxref("document.exitFullscreen()") }}.</p>

<h2 id="Prefijado">Prefijado</h2>

<p>De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Estándar</th>
   <th scope="col">Blink (Chrome y 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>onmsfullscreenchange</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>onmsfullscreenerror</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="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Fullscreen")}}</td>
   <td>{{Spec2("Fullscreen")}}</td>
   <td>Versión inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</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>{{CompatUnknown}}</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>Característica</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>Soporte básico</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>{{CompatUnknown}}</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="Véase_también">Véase también</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>