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.