✅Cómo Abrir un Video de YouTube en un Popup con un Botón en Gutenberg

Hoy te traigo un snippet muy práctico para Gutenberg: un botón que abre un popup a pantalla completa con un video de YouTube incrustado. Ideal para páginas de inicio, landing pages o incluso para incluirlo en la barra lateral sin ocupar mucho espacio.

¿Por qué usar este sistema?

A veces, incrustar directamente un video de YouTube rompe el diseño o no es lo más estético, especialmente en zonas como el sidebar o widgets pequeños. Con este código, puedes tener un simple botón elegante y que, al hacer clic, abre el video de forma destacada en un popup.

¿Qué vamos a crear?

• Un botón personalizado.
• Un popup fullscreen que se activa al hacer clic.
• Autoplay del video al abrir.
• Cierre del popup al pulsar la «X» o al hacer clic fuera.
• Todo hecho con HTML, CSS y JavaScript directamente en un bloque de Gutenberg.

Código completo para Gutenberg

Simplemente copia y pega el siguiente código dentro de un bloque de HTML personalizado de Gutenberg o dentro de un widget de HTML si es para la barra lateral.

<style>
  .video-popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    background: #13b0a0;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 220px;
    margin: 20px auto;
  }
  .video-popup-btn:hover {
    background: #009975;
    transform: translateY(-2px);
  }

  .video-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .video-overlay.active {
    display: flex;
  }
  .video-popup-content {
    position: relative;
    width: 90%;
    max-width: 800px;
  }
  .video-popup-content iframe {
    width: 100%;
    height: 450px;
    border: none;
  }
  .close-popup {
    position: absolute;
    top: -30px;
    right: -30px;
    background: #fff;
    color: #111;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
</style>

<!-- Botón -->
<div style="text-align: center;">
  <a class="video-popup-btn" id="open-video">▶ Ver Video</a>
</div>

<!-- Popup -->
<div class="video-overlay" id="video-popup">
  <div class="video-popup-content">
    <span class="close-popup" id="close-video">&times;</span>
    <iframe id="video-iframe" allowfullscreen></iframe>
  </div>
</div>

<script>
  const openBtn = document.getElementById('open-video');
  const closeBtn = document.getElementById('close-video');
  const popup = document.getElementById('video-popup');
  const iframe = document.getElementById('video-iframe');

  const videoUrl = "https://www.youtube.com/watch?v=TTEYzvqFHps";
  const videoId = videoUrl.split("v=")[1];

  openBtn.addEventListener('click', () => {
    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
    popup.classList.add('active');
  });

  closeBtn.addEventListener('click', () => {
    popup.classList.remove('active');
    iframe.src = ""; // Reset video
  });

  popup.addEventListener('click', (e) => {
    if (e.target === popup) {
      popup.classList.remove('active');
      iframe.src = "";
    }
  });
</script>

Lenguaje del código: HTML, XML (xml)

¿Cómo personalizarlo?

Vamos a ver cómo adaptar el código a tu gusto:

1. Cambiar la URL del video

Modifica esta línea de código JavaScript:

const videoUrl = "https://www.youtube.com/watch?v=TTEYzvqFHps";

Sustitúyela por la URL completa de cualquier video de YouTube que quieras mostrar.

2. Personalizar el botón

Dentro del bloque .video-popup-btn puedes cambiar el texto o agregar un icono:

<a class="video-popup-btn" id="open-video">▶ Ver Video</a>

Y si quieres cambiar su color, lo tienes aquí en CSS:

background: #13b0a0;

Cámbialo por cualquier otro color corporativo.

3. Ajustar el tamaño del popup

El tamaño máximo del video es este:

max-width: 800px;
height: 450px;

Si prefieres un video más grande o más pequeño solo ajusta esos valores.

4. Cambiar la animación o comportamiento

Por defecto el video hace autoplay, pero si prefieres que no lo haga, elimina ?autoplay=1 de esta línea dentro del script:

iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;

5. Uso en cualquier parte de tu web

Este código funciona tanto en:

• Entradas y páginas.
• Barras laterales.
• Cualquier área de widgets donde puedas insertar un bloque de HTML.

Resultado final

Con este snippet, podrás mostrar cualquier video en un popup atractivo, sin recargar la interfaz de tu web y sin depender de ningún plugin adicional.

Nos vemos en el siguiente tutorial. Un saludo.