Video nativo en pantalla completa

1Video en pantalla completa integrado#

Tu app generada ya admite la reproducción nativa de video en pantalla completa. Cuando un usuario toca el botón de pantalla completa en un elemento HTML5 <video>, la app:

• Entra en una verdadera pantalla completa inmersiva
• Gira automáticamente a horizontal
• Oculta todas las barras de navegación
• Restaura la orientación vertical cuando el usuario sale de la pantalla completa

No necesita configuración: ¡funciona automáticamente! El bloqueo de orientación lo gestiona la app, así que incluso las apps configuradas solo en vertical pasarán correctamente a horizontal durante la reproducción de video.

2Fuentes de video compatibles#

Los siguientes tipos de video funcionan con pantalla completa:

✅ Elementos HTML5 <video>
✅ Videos incrustados de YouTube (iframe)
✅ Videos incrustados de Vimeo
✅ Videos MP4/WebM alojados por ti
✅ Transmisiones HLS (.m3u8)

⚠️ Parte del contenido protegido con DRM puede no entrar en pantalla completa nativa

3Buenas prácticas de video para tu sitio web#

Para la mejor experiencia de video en tu app generada:

<!-- Good: Standard HTML5 video -->
<video controls playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Good: YouTube embed -->
<iframe
  src="https://youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

<!-- Tip: Add 'playsinline' attribute
     for inline playback on iOS too -->

4Combínalo con PiP#

Para la mejor experiencia de video, activa tanto Fullscreen Video (integrado) como el modo PiP:

1. El usuario ve el video integrado en la página
2. Toca pantalla completa → entra en horizontal inmersivo
3. Toca atrás → vuelve a la vista normal
4. Presiona inicio → entra en la ventana flotante PiP

¡Esto les da a tus usuarios una experiencia como la de YouTube en tu app web!