All integration guides
Framework integration / Svelte
Use a small Svelte component and the shared runtime.
Create a reusable Svelte 5 video component that renders on the server, initializes in the browser, and remains friendly to client-side navigation.
Recommended install
Render the data marker normally and add the runtime once in onMount or the application layout.
Reviewed August 17, 2026
Why this route
Use the platform’s natural insertion point.
The marker can be server-rendered while script installation stays browser-only. The runtime observes newly added markers, so navigation and conditional rendering remain straightforward.
Installation
Four moves from dashboard to live page.
- 1Publish the video and approve the exact local, preview, staging, and production origins that will host it.
- 2Create the reusable component below and pass the publication public ID as a prop.
- 3Place the component in a page or layout; move runtime loading to the root layout if most pages contain video.
- 4Test server rendering, client navigation, conditional mounting, and multiple players on one page.
SuperDuperVideo.svelte
<script>
import { onMount } from "svelte";
let { publicId } = $props();
onMount(() => {
const selector = "script[data-sdv-runtime]";
if (document.querySelector(selector)) return;
const script = document.createElement("script");
script.src = "https://embed.superdupervideos.com/v1/embed.js";
script.async = true;
script.dataset.sdvRuntime = "";
document.head.appendChild(script);
});
</script>
<div class="video" data-sdv-video={publicId}></div>
<style>
.video { width: 100%; aspect-ratio: 16 / 9; background: #020617; }
</style>More integration guides
Ready for the real snippet?