Guía de instalación — WordPress (+ Elementor)

Volver a: Índice de guías

Cómo incrustar un embed de Treisa Player en WordPress, con el editor de bloques (Gutenberg) o con Elementor. EMBED_KEY es la key de tu embed (Player → Embeds); el host https://player.treisaflow.com es el por defecto (el snippet del panel trae el real).

---

1. Antes de empezar

1. Dominio registrado en Player → Dominios — el dominio de tu sitio WordPress, sin https:// (ejemplo: misitio.com).
2. Flag del workspace activo (treisa_player_external_embed_enabled).
3. El video debe estar publicado y en estado ready.

2. Paso a paso — editor de bloques (Gutenberg)

El snippet que vas a pegar es exactamente este (de Player → Embeds → Copiar snippet, variante Script v2):

<!-- Treisa Player — embed -->
<div data-treisa-player="EMBED_KEY"></div>
<script async src="https://player.treisaflow.com/v2/player.js"></script>

Los nombres de menú corresponden al editor en inglés; en un WordPress en español el bloque se llama HTML personalizado.

1. En WP Admin ve a Pages → Add New (o Posts), o edita una existente.
2. En el lugar del video, pulsa + (Add block) y busca «HTML».
3. Elige el bloque Custom HTML.
4. En Paste your HTML code or embed code pega el snippet de la sección anterior, con tu EMBED_KEY real. La pestaña Preview del bloque muestra el contenedor (el video se reproduce en la página publicada, no siempre dentro del editor).
5. Publish / Update la página y ábrela en una pestaña de incógnito para verificar.

3. Paso a paso — Elementor

1. Edita la página y pulsa Edit with Elementor.

2. En el panel de widgets (izquierda) busca «HTML».

3. Arrastra el widget HTML (icono </>) al lugar del video.

4. En el campo HTML Code del widget pega el mismo snippet de la sección 2, con tu EMBED_KEY real.

5. Pulsa Publish / Update. El JavaScript del snippet no se ejecuta dentro del editor de Elementor: verifica en la página publicada.

Nota: por defecto el widget HTML de Elementor solo está disponible para administradores (se controla desde Elementor → Role Manager).

4. Variante iframe plano

Si prefieres no cargar scripts de terceros, usa la variante Iframe plano del panel en el mismo bloque/widget:

<iframe
  src="https://player.treisaflow.com/e/EMBED_KEY"
  title="Treisa Player"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-presentation"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

5. CSP y plataformas de hosting

• WordPress auto-alojado (.org): WordPress no impone CSP por defecto. Si tu hosting o un plugin de seguridad (Wordfence y similares) añade cabeceras CSP, incluye:

  script-src https://player.treisaflow.com;
  frame-src https://player.treisaflow.com
  

  (con la variante iframe solo necesitas frame-src).

• Plugins de optimización que aplazan/reescriben scripts externos: el loader ya es async; excluye player.js de cualquier «defer/merge» automático para no reordenar la inyección.

• WordPress.com (alojado): en planes sin plugins (Free/Personal/Premium) el bloque Custom HTML filtra <script> e <iframe> — el snippet se guarda incompleto. Necesitas un plan con plugins activados (Business o superior) o un WordPress auto-alojado.

6. Troubleshooting

Códigos completos en la sección 6 del SDK.