All integration guides
Framework integration / React
Wrap the player in a tiny React component.
Render a stable video marker from React, load the shared runtime once, and keep video placement compatible with client-side navigation.
Recommended install
Render the data marker in JSX and install the runtime once from an effect or the application document shell.
Reviewed August 17, 2026
Why this route
Use the platform’s natural insertion point.
The SuperDuper runtime owns player initialization. React only needs to render the marker and ensure the shared script is present, which keeps the component small and supports dynamically mounted videos.
Installation
Four moves from dashboard to live page.
- 1Publish the video and approve every application origin used in development, staging, and production.
- 2Add the component below and pass it the stable public publication ID from the dashboard.
- 3Render the component where the player belongs. The script guard prevents duplicate runtime elements.
- 4Test a client-side route change, a direct page load, and a page containing more than one player.
SuperDuperVideo.jsx
import { useEffect } from "react";
const RUNTIME_SELECTOR = "script[data-sdv-runtime]";
const RUNTIME_URL = "https://embed.superdupervideos.com/v1/embed.js";
export function SuperDuperVideo({ publicId }) {
useEffect(() => {
if (document.querySelector(RUNTIME_SELECTOR)) return;
const script = document.createElement("script");
script.src = RUNTIME_URL;
script.async = true;
script.dataset.sdvRuntime = "";
document.head.appendChild(script);
}, []);
return (
<div
data-sdv-video={publicId}
style={{ display: "block", width: "100%", aspectRatio: "16 / 9", background: "#020617" }}
/>
);
}More integration guides
Ready for the real snippet?