Skip to main content

Embedding Clips

A job.completed webhook hands you three URLs, and they are not interchangeable. Each one has exactly one job:

FieldWhat it isWhere it goes
clip_urlOur player page — an HTML documentAn <iframe> on your site
video_urlThe rendered mp4 itselfog:video, a <video> tag, a download
thumbnail_urlA poster JPGog:image, a preview tile

On your own page​

Put clip_url in an <iframe> and you get our player, controls and all:

<iframe src="https://dinkem.gg/clips/3fa85f64-5717-4562-b3fc-2c963f66afa6/embed"
        frameborder="0" allowfullscreen></iframe>

It's responsive and fills its container, so size it with a 16:9 wrapper rather than fixed dimensions.

Adding your outro​

The player can roll your own outro straight after the clip, as one continuous timeline — the seek bar spans both, and the scrubber crosses the boundary. First upload an outro on the dashboard Assets page (see Managing Assets); then name it by its outro_id in an optional query param on the embed URL:

<iframe src="https://dinkem.gg/clips/3fa85f64-5717-4562-b3fc-2c963f66afa6/embed?outro_id=YOUR_OUTRO_ID"
        frameborder="0" allowfullscreen></iframe>

Leave outro_id off and the clip plays on its own — that's the default. An id we can't resolve is never an error: the player falls back to the clip alone. The outro is a player-side addition, so video_url is always the clip by itself, and so is anything that unfurls from it.

<video src="https://hel1.your-objectstorage.com/dnkm/3fa85f64-5717-4562-b3fc-2c963f66afa6.mp4"
       poster="https://hel1.your-objectstorage.com/dnkm/3fa85f64-5717-4562-b3fc-2c963f66afa6.jpg"
       controls></video>

Unfurling in Discord, Slack and Twitter​

Social platforms don't run your page's JavaScript and they don't render arbitrary iframes. They read Open Graph tags and fetch the media themselves — so the tags have to point at media files, which means video_url and thumbnail_url:

<meta property="og:type" content="video.other">
<meta property="og:url" content="https://your-site.example/highlight/abc123">
<meta property="og:title" content="Ace on Mirage">

<!-- video_url — the mp4 -->
<meta property="og:video" content="https://hel1.your-objectstorage.com/dnkm/3fa85f64-5717-4562-b3fc-2c963f66afa6.mp4">
<meta property="og:video:secure_url" content="https://hel1.your-objectstorage.com/dnkm/3fa85f64-5717-4562-b3fc-2c963f66afa6.mp4">
<meta property="og:video:type" content="video/mp4">

<!-- thumbnail_url — the poster, shown while the video loads and wherever video isn't supported -->
<meta property="og:image" content="https://hel1.your-objectstorage.com/dnkm/3fa85f64-5717-4562-b3fc-2c963f66afa6.jpg">

:::warning Don't put clip_url in og:video

This is the one mistake that silently breaks the card. clip_url is an HTML page; Discord's media proxy fetches whatever is in og:video expecting an mp4, gets text/html, and drops the player — leaving a plain link or a bare thumbnail. It won't fall back to rendering the page in an iframe: Discord only does that for a hardcoded list of providers (YouTube, Twitch and friends), and there is no way to opt in.

og:video takes video_url. clip_url belongs in an <iframe> on your own site, and nowhere else.

:::

If you're linking straight to a dinkem.gg clip page rather than your own, there's nothing to do — /clips/<id> and /clips/<id>/embed already carry the right tags and unfurl as a playable card.

Checking your tags​

Fetch your own page the way the crawler does and confirm og:video ends in .mp4:

curl -sL -A 'Discordbot/2.0' https://your-site.example/highlight/abc123 | grep 'og:video'

Discord caches unfurls per URL, so after a fix an already-posted link keeps showing the old card. Test with a fresh URL, or add a throwaway query string.