Cómo incrustar tu juego HTML5 con permiso y límites claros

Elige el destino correcto

Incrusta únicamente una versión tuya o para la que tengas autorización explícita. Permiso para enlazar no significa permiso para incrustar o redistribuir archivos y recursos. Un widget de tienda puede mostrar una presentación sin ofrecer el juego completo dentro de un iframe.

PixelGamesHub enlaza las versiones originales: no ofrece alojamiento ni un servicio de incrustación. Antes de preparar un marco, abre el juego directamente y verifica que funciona sin credenciales privadas. La página que lo incluye también debe tener permiso para utilizar las imágenes y demás medios.

Empieza con permisos limitados

El siguiente código es un ejemplo visible, no un juego incrustado en este artículo. Sustituye la dirección por tu versión autorizada. El sandbox permite scripts y bloqueo del puntero, pero no habilita automáticamente identidad de origen, almacenamiento, navegación superior o ventanas emergentes.

Algunas versiones no funcionarán con estas restricciones. Investiga qué necesita cada una y evalúa alojarla en un origen aislado antes de ampliar permisos. No añadas permisos por ensayo ciego ni interpretes este ejemplo mínimo como una configuración segura universal.

<iframe
  src="https://game.example.com/index.html"
  title="Play your game"
  width="960" height="540"
  style="width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;"
  loading="lazy"
  allow="fullscreen"
  sandbox="allow-scripts allow-pointer-lock"
></iframe>
<a href="https://game.example.com/index.html">Open the game directly</a>

Si el marco está bloqueado

Prueba primero la dirección directa. Si tampoco funciona, revisa la carga del juego antes del iframe. Si funciona fuera del marco, inspecciona las políticas frame-ancestors de CSP y X-Frame-Options del destino, y la política frame-src de la página contenedora.

Cambiar CORS no soluciona todos los bloqueos de marcos. No elimines cabeceras ni uses un proxy para saltarte la decisión de otro creador. Si no tienes control o autorización, conserva un enlace para jugar directamente en una pestaña nueva.

• Revisa una versión de Unity que tampoco carga directamente →

Prueba dentro de la página real

Comprueba el enfoque del teclado, la entrada y salida del puntero, el inicio del sonido y cualquier petición de pantalla completa. Redimensiona la página y observa si siguen visibles los controles. Probar la dirección directa no demuestra que la experiencia enmarcada funcione igual.

Registra el navegador, el dispositivo y la versión probada. Comprueba entrada directa y enmarcada, inicio y reinicio, y deja siempre una alternativa visible para abrir el juego original. No anuncies soporte móvil si solo lo revisaste en escritorio.

Incrustar no equivale a publicar una ficha

La lista de preparación permite registrar lo que has comprobado, pero no hace peticiones de red, certifica compatibilidad ni verifica permisos. Descarga el registro si lo necesitas: las herramientas locales no conservan tus datos al actualizar la página.

Para presentar tu juego aquí, facilita un enlace HTTPS público y la información del lanzamiento. El envío requiere una cuenta verificada y usa un editor en inglés. Una ficha comunitaria y una recomendación editorial son procesos distintos; no se garantiza ninguna posición ni tráfico.

• Registra las comprobaciones que sí realizaste →
• Consulta qué debe ofrecer el enlace público →

Referencias oficiales

• MDN: elemento iframe
• MDN: política CSP frame-ancestors
• itch.io: juegos HTML5

Referencias comprobadas: 2026-10-16. La portada es una captura real con atribución, no un resultado de este tutorial.