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
- Authenticate the user. Your server generates a one-time login token and the end user's browser exchanges it for a WeVideo session cookie.
- Render the iframe pointing at the hub or editor URL, with the
allowattribute 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:
- From your backend, call
POST /api/5/login-token/:userIdwith your API credentials to mint a one-time login token for the WeVideo user. - Return the token to the end user's browser.
- From the browser, exchange it for a session cookie by hitting
https://www.wevideo.com/api/5/login-token/login/{token}with credentials included.
// 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.
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:
| Permission | Why it's needed |
|---|---|
microphone | Audio recording (voiceover, screen recording with audio) |
camera | Video recording (webcam capture, green-screen) |
fullscreen | Lets 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.