Skip to main content

SSO flow - embedding WeVideo

You can embed WeVideo into your own site as an iframe, either the main app itself, the interactivity module or specific resource. This guide walks through the end-to-end flow: pointing the iframe at the right URL, setting the permissions the app needs, and authenticating the user.

The flow at a glance

  1. Authenticate the user. Your server generates a one-time login token and the end user's browser exchanges it for a WeVideo session cookie.
  2. Render the iframe pointing at the hub or editor URL, with the allow attribute set so recording and fullscreen work.

1. Authenticate the user

The iframe loads in the user's browser, so it needs a logged-in WeVideo session before navigation, save, and export will work. Use the SSO login-token flow:

  1. From your backend, call POST /api/5/login-token/:userId with your API credentials to mint a one-time login token for the WeVideo user.
  2. Return the token to the end user's browser.
  3. From the browser, exchange it for a session cookie by hitting https://www.wevideo.com/api/5/login-token/login/{token} with credentials included.
Browser-side: exchange the token for a session
// 1. Fetch a one-time login token from your own backend (assuming your backend endpoint is /wevideo-login-token and returns { token: "..." })
const { token } = await fetch("/wevideo-login-token").then(r => r.json());

// 2. Exchange it for a WeVideo session cookie
await fetch(`https://www.wevideo.com/api/5/login-token/login/${token}`, {
credentials: "include",
});

// 3. Now it's safe to render the iframe

See Authentication for how to authenticate the server-to-server call that generates the token.

First-time users

If this is the user's first time using WeVideo, create them through POST /api/5/public/users and persist the mapping between your internal user ID and the returned WeVideo userId before generating a login token.

2. Render the iframe

Embedding the full app

Point the iframe at https://www.wevideo.com/class to embed the full WeVideo app.

<iframe src="https://www.wevideo.com/class" allow="microphone; camera; fullscreen"></iframe>

The allow attribute

The allow attribute is required for recording and fullscreen to work in cross-origin iframes:

PermissionWhy it's needed
microphoneAudio recording (voiceover, screen recording with audio)
cameraVideo recording (webcam capture, green-screen)
fullscreenLets the user expand the editor to fullscreen

Without these, the relevant features will silently fail. See Chromium's feature policy in cross-origin iframes for background.