Guía: Videos de X.com en El Diario

1. Publicar una nota con video

Crea el archivo del post normalmente en _posts/ y agrega video_url en el front matter:

---
layout: post
title: "Titulo de la nota"
subtitle: "Breve descripción o entradilla."
date: 2026-03-01
categories: [politica]
author: redaccion
featured: false

# — VIDEO —
video_url: "https://x.com/usuario/status/1234567890"
# video_caption: "Texto personalizado de pie (opcional)"
---

Tu nota va aquí normalmente. El video aparece automáticamente
encima del cuerpo del artículo, colapsado con un botón ▶ Ver video.

Puedes escribir todo el contexto, análisis y citas aquí debajo.

El sistema extrae @usuario de la URL automáticamente y muestra:

Vía @usuario en X

2. Insertar un video dentro del cuerpo de cualquier nota

Dentro del texto de un artículo .md, usa el include con la sintaxis de Liquid:

<div class="x-video-wrapper"
     data-ad-enabled="false"
     data-ad-duration="7"
     data-skip-after="3">

  <!-- ===== ESTADO 1: COLAPSADO ===== -->
  <div class="x-video-collapsed">
    <div class="x-video-collapsed__backdrop" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="x-video-collapsed__bg-logo" fill="white">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
    </div>
    <div class="x-video-collapsed__inner">
      <button class="x-video-reveal-btn" type="button" aria-label="Reproducir video de @usuario">
        <span class="x-video-reveal-btn__play" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </span>
        <span class="x-video-reveal-btn__label">Ver video</span>
      </button>
      <p class="x-video-collapsed__credit">
        <svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
        @usuario en X
      </p>
    </div>
  </div>

  <!-- ===== ESTADO 2: PRE-ROLL (solo si está activo) ===== -->
  

  <!-- ===== ESTADO 3: VIDEO ===== -->
  <!-- El blockquote se inyecta via JS al mostrar, evitando carga anticipada del widget -->
  <div class="x-video-embed" hidden
       data-tweet-url="https://twitter.com/usuario/status/1234567890"
       data-x-video-url="https://x.com/usuario/status/1234567890">
    <p class="x-video-source">
      <svg class="x-video-source__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
      
        Vía <a href="https://x.com/usuario" class="x-video-source__link"
               target="_blank" rel="noopener noreferrer">@usuario</a> en X
      
    </p>
  </div>

</div>

Con pie de video personalizado:

<div class="x-video-wrapper"
     data-ad-enabled="false"
     data-ad-duration="7"
     data-skip-after="3">

  <!-- ===== ESTADO 1: COLAPSADO ===== -->
  <div class="x-video-collapsed">
    <div class="x-video-collapsed__backdrop" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="x-video-collapsed__bg-logo" fill="white">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
    </div>
    <div class="x-video-collapsed__inner">
      <button class="x-video-reveal-btn" type="button" aria-label="Reproducir video de @usuario">
        <span class="x-video-reveal-btn__play" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </span>
        <span class="x-video-reveal-btn__label">Ver video</span>
      </button>
      <p class="x-video-collapsed__credit">
        <svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
        @usuario en X
      </p>
    </div>
  </div>

  <!-- ===== ESTADO 2: PRE-ROLL (solo si está activo) ===== -->
  

  <!-- ===== ESTADO 3: VIDEO ===== -->
  <!-- El blockquote se inyecta via JS al mostrar, evitando carga anticipada del widget -->
  <div class="x-video-embed" hidden
       data-tweet-url="https://twitter.com/usuario/status/1234567890"
       data-x-video-url="https://x.com/usuario/status/1234567890">
    <p class="x-video-source">
      <svg class="x-video-source__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
      
        Video captado por ciudadanos en San Salvador
      
    </p>
  </div>

</div>

Sin pre-roll (aunque esté activo en settings):

<div class="x-video-wrapper"
     data-ad-enabled="false"
     data-ad-duration="7"
     data-skip-after="3">

  <!-- ===== ESTADO 1: COLAPSADO ===== -->
  <div class="x-video-collapsed">
    <div class="x-video-collapsed__backdrop" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="x-video-collapsed__bg-logo" fill="white">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
    </div>
    <div class="x-video-collapsed__inner">
      <button class="x-video-reveal-btn" type="button" aria-label="Reproducir video de @usuario">
        <span class="x-video-reveal-btn__play" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </span>
        <span class="x-video-reveal-btn__label">Ver video</span>
      </button>
      <p class="x-video-collapsed__credit">
        <svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
        @usuario en X
      </p>
    </div>
  </div>

  <!-- ===== ESTADO 2: PRE-ROLL (solo si está activo) ===== -->
  

  <!-- ===== ESTADO 3: VIDEO ===== -->
  <!-- El blockquote se inyecta via JS al mostrar, evitando carga anticipada del widget -->
  <div class="x-video-embed" hidden
       data-tweet-url="https://twitter.com/usuario/status/1234567890"
       data-x-video-url="https://x.com/usuario/status/1234567890">
    <p class="x-video-source">
      <svg class="x-video-source__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
      </svg>
      
        Vía <a href="https://x.com/usuario" class="x-video-source__link"
               target="_blank" rel="noopener noreferrer">@usuario</a> en X
      
    </p>
  </div>

</div>

3. Activar el pre-roll publicitario

Edita _data/settings.yml:

video_ad:
  enabled: true       # ← cambiar a true
  duration: 7         # segundos que dura el anuncio
  skip_after: 3       # tras cuántos segundos aparece el botón "Saltar"

Sin patrocinador configurado

Muestra automáticamente el banner animado “¿Tu marca aquí?” (fondo oscuro con orbes de colores, badge verde “DISPONIBLE”, botón rosa-naranja).

Con patrocinador real (cuando consigas el cliente)

video_ad:
  enabled: true
  duration: 8
  skip_after: 4
  ad_label: "Publicidad"
  sponsor_name: "Banco Agrícola"
  sponsor_url: "https://bancoagricola.com"
  sponsor_logo: "/assets/images/ads/logo-ba.png"
  sponsor_tagline: "El banco que te acompaña"

Con imagen de anuncio completa (reemplaza logo + tagline):

  ad_image: "/assets/images/ads/banner-ba-720x280.jpg"

4. Parámetros del include `x-video.html`

Parámetro	Requerido	Descripción
`url`	Sí	URL del tweet (`x.com` o `twitter.com`)
`caption`	No	Pie de video personalizado
`no_preroll`	No	Cualquier valor suprime el pre-roll en este embed

5. Galería de videos

Todos los posts con video_url en el front matter aparecen automáticamente en:

/videos/

El enlace ya está en el menú superior. No requiere configuración adicional. Los videos en la galería se muestran sin pre-roll.

El banner animado entre el nav y la portada se incluye en _layouts/home.html.

Para ocultarlo temporalmente:

Para reemplazarlo con el banner de un cliente real: Comenta el include y agrega directamente la imagen o código del cliente:

<a href="https://cliente.com" target="_blank" rel="noopener sponsored">
  <img src="/assets/images/ads/banner-cliente.jpg"
       alt="Nombre del cliente"
       style="width:100%; display:block;">
</a>

7. URLs de X.com — formatos aceptados

https://x.com/usuario/status/1234567890
https://twitter.com/usuario/status/1234567890
http://x.com/usuario/status/1234567890

Todos los formatos funcionan. El sistema normaliza la URL internamente.