Inicio codigos-html-css Cómo Poner Juegos en Pantalla Completa en Blogger | Fullscreen

Cómo Poner Juegos en Pantalla Completa en Blogger | Fullscreen

Tutoriales Blogger

Cómo Poner Juegos en Pantalla Completa (Fullscreen) en Blogger

Aprende a integrar un reproductor y un botón de pantalla completa responsivo para que tus visitantes disfruten de los videojuegos sin recortes

Cómo Poner Juegos en Pantalla Completa en Blogger
📋 En este artículo aprenderás:

1. Por qué habilitar pantalla completa en los juegos de tu blog

Resulta tedioso jugar un videojuego en las entradas de Blogger al estar limitado por un cuadro o ventana fija. Muchas veces el juego se visualiza incompleto o las medidas no se centran correctamente. Para solucionar esto, implementamos un sistema en HTML y JavaScript que permite abrir cualquier juego en modo Pantalla Completa (Fullscreen) de manera limpia y fluida.

💡 CONSEJO CLAVE
Este método es compatible con la mayoría de navegadores modernos y se adapta perfectamente a cualquier iframe de videojuegos web (HTML5).

2. Configuración de estilos CSS y Script en la plantilla

Para que la función de pantalla completa trabaje correctamente en todo tu sitio, debes agregar los estilos de diseño y el script de control en el código fuente de tu tema de Blogger.

PASO 1

Añadir Estilos CSS

Pega las reglas de diseño antes de la etiqueta de cierre </style>.

PASO 2

Instalar el Script

Incorpora la función JavaScript antes de cerrar la etiqueta </body>.

Paso 1: Agregar el código CSS

/* Contenedor del juego e iframe */.game-container{position:relative;width:100%;max-width:800px;margin:20px auto;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.3)}.game-iframe{width:100%;height:480px;border:none;display:block}.game-container:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000}.game-container:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000}.game-container:fullscreen .game-iframe,.game-container:-webkit-full-screen .game-iframe{width:100%;height:100%;flex-grow:1}.game-container:fullscreen + div,.game-container:-webkit-full-screen + div{display:none}.btn-fullscreen{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:14px 32px;border-radius:14px;text-decoration:none;font-family:'Segoe UI',system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:0.5px;box-shadow:0 4px 20px rgba(16,185,129,0.35);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(255,255,255,0.15);cursor:pointer}.btn-fullscreen:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(16,185,129,0.55);background:linear-gradient(135deg,#34d399,#10b981)}.btn-fullscreen:active{transform:translateY(1px);box-shadow:0 2px 10px rgba(16,185,129,0.3)}.icon-fullscreen{transition:transform 0.25s ease;opacity:0.9}.btn-fullscreen:hover .icon-fullscreen{transform:scale(1.15)}

Paso 2: Agregar el código JavaScript

<script>
  function toggleFullscreen(buttonElement) {
    // Busca el contenedor del juego dentro de la misma sección o el más cercano
    var gameElem = buttonElement.closest('div').previousElementSibling;
    if (!gameElem || !gameElem.classList.contains('game-container')) {
      // Búsqueda alternativa por si acaso
      gameElem = document.querySelector('.game-container');
    }

    if (!document.fullscreenElement &amp;&amp; !document.webkitFullscreenElement &amp;&amp; !document.msFullscreenElement) {
      if (gameElem.requestFullscreen) {
        gameElem.requestFullscreen();
      } else if (gameElem.webkitRequestFullscreen) {
        gameElem.webkitRequestFullscreen();
      } else if (gameElem.msRequestFullscreen) {
        gameElem.msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }
</script>

3. Cómo insertar el código de los juegos en tus entradas

Cuando escribas una nueva publicación en el editor de Blogger (seleccionando la sección Vista HTML), utiliza siempre la siguiente estructura para incrustar tu videojuego:

<!-- 1. El contenedor del juego -->
<div class="game-container">
  <iframe 
    class="game-iframe" 
    src="URL_DEL_JUEGO" 
    allow="fullscreen" 
    allowfullscreen="true">
  </iframe>
</div>

<!-- 2. El botón (debe ir justo debajo del juego) -->
<div style="text-align:center; margin:25px 0;">
  <button class="btn-fullscreen" onclick="toggleFullscreen(this)" title="Juega en Pantalla Completa">
    <svg aria-hidden="true" class="icon-fullscreen" height="20" viewBox="0 0 28 32" width="20" fill="currentColor">
      <path d="M0 11.25V3.5C0 2.669.669 2 1.5 2h7.75c.412 0 .75.337.75.75v2.5c0 .412-.338.75-.75.75H4v5.25c0 .412-.337.75-.75.75H.75a.753.753 0 0 1-.75-.75zm18-8.5v2.5c0 .412.337.75.75.75H24v5.25c0 .412.337.75.75.75h2.5c.413 0 .75-.338.75-.75V3.5c0-.831-.669-1.5-1.5-1.5h-7.75a.752.752 0 0 0-.75.75zM27.25 20h-2.5a.752.752 0 0 0-.75.75V26h-5.25a.752.752 0 0 0-.75.75v2.5c0 .413.337.75.75.75h7.75c.831 0 1.5-.669 1.5-1.5v-7.75a.752.752 0 0 0-.75-.75zM10 29.25v-2.5a.752.752 0 0 0-.75-.75H4v-5.25a.752.752 0 0 0-.75-.75H.75a.752.752 0 0 0-.75.75v7.75c0 .831.669 1.5 1.5 1.5h7.75c.412 0 .75-.337.75-.75z"></path>
    </svg>
    <span>Pantalla Completa</span>
  </button>
</div>
⚠️ ADVERTENCIA IMPORTANTE
Reemplaza la opción URL_DEL_JUEGO por el enlace embebido del videojuego que deseas mostrar en tu publicación.

Video Tutorial

Demostración del Resultado

Comparte este artículo en tus Redes Sociales

¿Te podría interesar?
COMENTARIOS