Reactive URL binding

The url attribute on <o-embed> is reactive. Changing it dynamically re-renders the embed without any DOM manipulation — the component detects the new provider and swaps the iframe automatically.

JavaScript

const embed = document.querySelector("o-embed");
embed.url = "https://open.spotify.com/track/7Ca8EuTCyU3pjJR4TNOXqs";
// The embed re-renders as a Spotify player immediately

Framework bindings

Because <o-embed> is a standard Web Component with reactive properties, it works with framework attribute/property binding. For detailed per-framework setup (TypeScript types, Vue config, React 18, SSR), see Framework usage.

React (19+):

function MediaEmbed({ url }) {
  return <o-embed url={url}></o-embed>;
}

Vue 3:

<template>
  <o-embed :url="mediaUrl"></o-embed>
</template>

Svelte 5:

<o-embed url={mediaUrl}></o-embed>

Preview-as-you-type

Reactive binding enables live preview patterns — useful in editors and CMS interfaces:

<input id="url-input" placeholder="Paste a media URL..." />
<o-embed id="preview"></o-embed>


<script>
  const input = document.getElementById("url-input");
  const preview = document.getElementById("preview");
  input.addEventListener("input", () => {
    preview.url = input.value;
  });
</script>