Cómo crear un vídeo de curso restringido con Vimeo y Webflow

Un curso restringido tiene dos cerraduras, y la mayoría de las configuraciones solo admiten una. La página comprueba si alguien ha pagado, oculta la lección si no lo ha hecho y todos los implicados sienten que el contenido está protegido.

Entonces, un estudiante abre la pestaña de red del navegador, copia la URL del reproductor y se la envía a un amigo. El bloqueo de la página hizo su trabajo a la perfección, pero el vídeo se reproduce de todos modos, porque la página nunca fue lo que realmente lo retenía.

Esta guía construye la segunda cerradura: la configuración de privacidad de Vimeo que decide dónde puede reproducirse un vídeo.

¿Qué necesitas para restringir vídeos de Vimeo en Webflow?

Necesitas un plan de pago de Vimeo, un proyecto de Webflow Cloud que ya identifique quién ha iniciado sesión y los ID de los vídeos. Esto asume que ya cuentas con una capa de derechos de acceso, ya que es una tarea independiente de la privacidad del vídeo.

Aquí tienes la lista completa antes de empezar:

• Un plan de pago de Vimeo, ya que "Solo incrustado" y "No listado" son funciones de pago, mientras que "Público" y "Privado" están disponibles en todos los planes.

• Un proyecto de Webflow Cloud que ejecute Next.js 15 o superior, con Node.js 22 o posterior instalado localmente.

• Una forma funcional de saber si el visitante actual ha comprado el curso, ya sea mediante una tabla de membresía, un estado de suscripción o una reclamación de rol.

• El dominio personalizado desde el que se servirán realmente las páginas de tu curso, ya que es lo que incluirás en la lista de permitidos.

Si aún no has creado la capa de membresía, nuestra guía de membresía con Supabase cubre el acceso por niveles, y esta guía continúa a partir del punto en el que ya puedes determinar si un estudiante tiene derecho a una lección específica. Así es como se integra la parte del vídeo.

5 pasos para crear vídeos de cursos restringidos con Vimeo y Webflow

La configuración incluye un ajuste de privacidad, una lista de dominios permitidos, una página que verifica los derechos de acceso, un código de incrustación y el hábito de probar aquello que realmente te preocupa.

Los dos primeros pasos se realizan íntegramente dentro de Vimeo, y son los que proporcionan la protección.

1. Configura cada vídeo del curso como "Solo incrustado"

Abre la configuración del vídeo en Vimeo y selecciona Compartir. En la ventana emergente que aparece, utiliza el menú desplegable de Privacidad (no la pestaña de Incrustar) y elige "Solo incrustado". Este ajuste permite incrustar el vídeo en otros sitios, pero no devuelve nada en vimeo.com, lo cual Vimeo describe como útil para empresas que alojan vídeos en sus propios dominios.

La pestaña de Incrustar es donde restringes los dominios, que es el siguiente paso.

Aquí tienes un par de notas sobre nombres para ahorrar tiempo. Los tutoriales antiguos se refieren a "Hide this from Vimeo.com", que es la etiqueta antigua para este comportamiento y que todavía aparece en el contenido de ayuda de Vimeo, así que guíate por la descripción y no por la etiqueta que recuerdes.

Si en algún momento configuras el vídeo como "No listado" (Unlisted), Vimeo añade un hash de privacidad a su URL que debe incluirse para que las inserciones y el uso compartido funcionen; por lo tanto, una inserción que funcionaba ayer puede dejar de hacerlo al cambiar la privacidad.

Terminas este paso con un vídeo que no devuelve nada en vimeo.com, pero que sigue permitiendo su inserción.

2. Restringe el vídeo a tus dominios

Sin salir del panel de inserción, abre el menú desplegable bajo "¿Dónde se puede insertar este vídeo?" y elige "Dominios específicos". Luego, añade cada dominio desde el que se sirve el curso en el cuadro "Dominios permitidos" y guarda con el botón más o la tecla Intro.

Este paso convierte un código de inserción copiado en un enlace muerto en el sitio de cualquier otra persona. Vimeo te permite especificar hasta 50 dominios, y cualquier sitio que no esté en la lista recibirá un error al intentar insertar el vídeo.

Añade todos los dominios desde los que realmente sirves contenido, incluido el subdominio de pruebas (staging) si lo usas para previsualizar, porque una entrada que falte se verá exactamente como un vídeo roto. No añadas dominios que no controles. Terminas este paso con un vídeo que se reproduce en las páginas de tu curso y da error en cualquier otro lugar.

3. Protege la página de la lección

Con el vídeo bloqueado en tu dominio, la protección de la página vuelve a su función principal: decidir qué puede ver un estudiante que ha iniciado sesión y mantener a los visitantes que no han pagado alejados del contenido de la lección que rodea al vídeo.

La página comprueba los permisos antes de mostrar nada:

// app/lessons/[slug]/page.tsx
import { notFound } from 'next/navigation'
import { getLesson } from '@/lib/lessons'
import { hasAccessToLesson } from '@/lib/entitlement'
import UpgradePrompt from '@/components/UpgradePrompt'

type Props = { params: Promise<{ slug: string }> }

export default async function LessonPage({ params }: Props) {
  const { slug } = await params
  const lesson = await getLesson(slug)

  if (!lesson) notFound()

  // Gate the page. This stops the lesson rendering, but it is not
  // what stops the video playing elsewhere: that is Vimeo's job.
  if (!(await hasAccessToLesson(lesson.id))) {
    return <UpgradePrompt lesson={lesson} />
  }

  return (
    <article>
      <h1>{lesson.title}</h1>
      <div style={{ position: 'relative', paddingTop: '56.25%' }}>
        <iframe
          // Store the full player URL Vimeo gives you, hash and all.
          // Rebuilding it from a bare ID breaks any video that ever
          // passed through Unlisted.
          src={lesson.vimeoPlayerUrl}
          allow="autoplay; fullscreen; picture-in-picture"
          title={lesson.title}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            border: 0,
          }}
        />
      </div>
    </article>
  )
}

Fíjate en lo que admite el comentario en ese controlador. La protección de la página no es la barrera de seguridad para el vídeo, y fingir lo contrario es lo que provocó la filtración en primer lugar. Es la barrera para todo lo demás en la página: la transcripción, las descargas, el enlace a la siguiente lección y el debate.

Mostrar un aviso de actualización en lugar de un error 404 suele ser la mejor decisión de producto, ya que un estudiante que pagó por el nivel uno y hizo clic en una lección de nivel dos es una oportunidad de venta, no un error. Terminas este paso con una página de lección que muestra el vídeo a los estudiantes con acceso y un aviso a todos los demás.

4. Mantén el ID del vídeo fuera del paquete público

La inserción necesita un ID de vídeo de Vimeo, y el instinto es poner el ID de cada lección en el CMS o en un archivo JSON que el cliente pueda leer. Eso deshace parte del trabajo que acabas de hacer.

Un ID de vídeo no es un secreto como una clave de API, porque la privacidad a nivel de dominio ya impide que se reproduzca en otros sitios. Pero una lista completa de todos los IDs de las lecciones entregada a visitantes no autenticados le dice a cualquiera exactamente qué tamaño tiene el curso y les da un mapa para probar. Obtén el ID desde el servidor para la lección que se está viendo, como hace la página anterior, en lugar de enviar todo el catálogo.

Esto importa más cuando vendes por niveles. Si el paquete de la página del nivel gratuito contiene los IDs de las lecciones premium, has publicado la estructura de lo que estás vendiendo. Terminas este paso con una página cuyo código fuente muestra un solo ID de vídeo: el que el estudiante tiene derecho a ver.

5. Prueba la filtración que te preocupa

La mayoría de las estructuras de cursos se prueban iniciando sesión y confirmando que el vídeo se reproduce. Eso verifica el camino feliz, no la protección.

Prueba el escenario real. Copia la URL del reproductor desde la pestaña de red, ábrela en una ventana privada y confirma que recibes el error de Vimeo en lugar de tu lección. Luego, pega el código de inserción en un archivo HTML de prueba servido desde un dominio diferente, o en un CodePen, y confirma que también falla allí. Si se reproduce en alguno de los dos casos, la lista de dominios es incorrecta o la configuración de privacidad no se guardó.

Haz esto de nuevo después de cualquier cambio en tus dominios, porque pasar de un dominio de pruebas a uno personalizado puede romper silenciosamente la protección o la reproducción, dependiendo de qué lista hayas olvidado actualizar. Terminas este paso habiendo visto cómo el vídeo falla donde debe hacerlo.

¿Por qué fallan los vídeos de Vimeo restringidos en Webflow?

Los fallos se dividen claramente en dos: el vídeo se reproduce donde no debería o se niega a reproducirse donde sí debería. Ambos provienen de los mismos dos ajustes, así que vale la pena revisarlos juntos.

Estos cuatro cubren casi todo, y el primero cuesta ingresos en lugar de tiempo de soporte.

El vídeo se reproduce para personas que no pagaron

Causa: El vídeo está configurado como Oculto en lugar de Solo inserción. La opción Oculto esconde el vídeo de las búsquedas, pero permite compartirlo mediante URL e insertarlo en cualquier parte. Por lo tanto, el acceso a la página es lo único que impide verlo, y se puede saltar fácilmente copiando el enlace del reproductor.

Solución: Cambia la privacidad a Solo inserción y añade privacidad a nivel de dominio, luego vuelve a probar abriendo la URL del reproductor directamente en una ventana privada. Ten en cuenta que cualquiera que ya tenga el enlace seguirá teniendo acceso hasta que cambies el ajuste, así que trata una filtración conocida como un motivo para actuar el mismo día y no en la próxima actualización de contenido.

Los estudiantes ven un error en lugar de la lección

Causa: El dominio que sirve la página no está en la lista de dominios permitidos. Vimeo devuelve un error a cualquier sitio que no esté en la lista, incluyendo casos sutiles como un subdominio de pruebas, una URL de vista previa o el dominio raíz cuando solo incluiste la versión www.

Solución: Añade todos los dominios desde los que sirves contenido, hasta el límite de 50. No confíes en la barra de direcciones para el nombre de host: abre la pestaña Red, busca la solicitud del reproductor que devuelve un 403 y lee el valor Referrer de sus encabezados de solicitud, ya que ese es el dominio que Vimeo realmente detectó.

Si el vídeo se reproduce en un entorno y falla en otro, el culpable habitual en Webflow Cloud es un nombre de host de entorno de vista previa que nunca se añadió a la lista.

Causa: Tu propio sitio está suprimiendo el referente, por lo que un dominio correctamente listado sigue fallando. Vimeo documenta esto como lo primero que hay que comprobar, y es un problema común en aplicaciones Next.js: una etiqueta <meta name="referrer" content="no-referrer"> o un encabezado Referrer-Policy impide que la solicitud del reproductor de origen cruzado lleve un referente, lo que deja a Vimeo sin poder verificar tu dominio.<meta name="referrer" content="no-referrer">Referrer-Policy: same-origin

Solución: Lee ese mismo encabezado Referrer-Policy. Si falta o está en blanco en lugar de ser incorrecto, el problema es tu política y no tu lista de permitidos. Reemplaza una etiqueta meta no-referrer con <meta name="referrer" content="strict-origin-when-cross-origin"> y flexibiliza el encabezado. Ten en cuenta también que algunos contextos de inserción de terceros eliminan el referente por completo, y la privacidad de dominio no puede funcionar allí en absoluto.<meta name="referrer" content="origin">

La inserción funcionaba ayer y hoy aparece en blanco

Causa: El hash de privacidad cambió o se eliminó. Este es un problema de migración más que de estado estable: Vimeo añade el hash cuando un vídeo es Oculto, y debe estar presente para que las inserciones y el uso compartido funcionen. Por lo tanto, una biblioteca que pasó por el estado Oculto antes de llegar a Solo inserción puede contener URLs almacenadas cuyo hash ya no coincide.

Solución: Regenera el código de inserción desde Vimeo después de cualquier cambio de privacidad en lugar de reutilizar una URL almacenada, y guarda lo que Vimeo te proporcione actualmente en lugar de reconstruir las URLs del reproductor manualmente a partir de un ID. Si construyes URLs a partir de IDs, un vídeo con hash fallará y nada en tu código parecerá estar mal.

Nadie puede verlo, ni siquiera tú

Causa: El vídeo está configurado como Privado. Ese ajuste restringe la visualización a ti y a los miembros de tu equipo en la cuenta, y Vimeo indica que otras personas no pueden verlo incluso cuando está insertado en otro sitio web, por lo que es demasiado restrictivo para un curso con clientes.

Solución: Usa Solo inserción con privacidad a nivel de dominio en su lugar. Privado es el ajuste correcto para copias de revisión interna y el incorrecto para cualquier cosa que vendas; ambos se confunden porque los dos suenan como la opción segura.

La clave es que Privado falla para todos por igual, así que si tu propia cuenta de prueba tampoco puede ver una lección insertada, el problema es el ajuste de privacidad y no tu lógica de derechos de acceso. Comprueba eso antes de investigar el código de acceso, porque un error de permisos y un ajuste de privacidad demasiado restrictivo pueden parecer idénticos en la página.

Qué puedes construir a continuación con Vimeo y Webflow

Con el vídeo restringido a tus dominios, las mejoras se centran en la experiencia del usuario: seguimiento del progreso por lección, reanudación desde donde se dejó, capítulos o transcripciones descargables que se liberan con la misma verificación de acceso que ya realiza la página.

Si tu curso se vende mediante suscripción en lugar de pago único, nuestra guía de suscripciones de Stripe explica cómo gestionar el acceso según el estado de la suscripción, que es lo que consulta esta página. Para rutas de conexión sin código, consulta la integración de Webflow y Vimeo.