DEV Community

reelfork
reelfork

Posted on Originally published at reelfork.com

Embedding an interactive, branching video player with one iframe

#webdev #html #css #video

Originally published on the ReelFork blog.

Embedding a video player is a solved problem. Embedding an interactive one — where the viewer's choices branch the story, and where those choices need to survive fullscreen, resizing, and a paywall — is slightly less solved. Here's how the ReelFork embed works, including the two things that usually go wrong.

The snippet

One iframe. No JavaScript, no SDK, no server-side configuration on your end.

<iframe
  src="https://player.reelfork.com/d/<drama_id>"
  width="640"
  height="360"
  allow="autoplay; fullscreen"
  allowfullscreen>
</iframe>
Enter fullscreen mode Exit fullscreen mode

You get the filled-in version from the drama page on ReelFork Cinema: Share → Embed. The drama ID and player URL come pre-populated.

Four steps from the drama page to a working embed

Making it responsive

The fixed 640×360 works for a desktop column and breaks everywhere else. The reliable fix is the old padding-bottom trick, and it's still the right answer: it reserves the correct box before the iframe loads, so the page doesn't reflow when the player arrives.

.drama-embed {
  position: relative;
  padding-bottom: 56.25%; /* 9 / 16 */
  height: 0;
  overflow: hidden;
}

.drama-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="drama-embed">
  <iframe src="https://player.reelfork.com/d/<drama_id>" allowfullscreen></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode

How padding-bottom reserves a 16:9 box before the iframe loads

If you only support modern browsers, aspect-ratio: 16 / 9 on the iframe does the same job in one line. The wrapper version is still worth keeping if you care about older Safari.

Thing that goes wrong #1: autoplay

Browsers block autoplay with sound. The usual workaround — mute the video — is exactly wrong for a story-driven format, where the dialogue is the content.

So the player doesn't autoplay. It renders a start screen and waits for a click. That click is a user gesture, which unblocks audio for the rest of the session. This is why allow="autoplay" in the snippet is about permitting later programmatic playback between branches, not about starting on load.

The practical consequence for you: don't try to force playback from the parent page. It will either be blocked or will start muted, and a muted interactive drama is a broken one.

Thing that goes wrong #2: assuming the iframe is sandboxed away from monetization

It isn't, and that's deliberate. Unlocks made inside an embedded player count toward creator earnings identically to unlocks on Cinema. Embedding moves where the drama is watched, not whether it's monetized.

The player is served from player.reelfork.com with permissive CORS headers, so it works from any origin without you configuring anything.

Starting at a specific episode

Append ?episode=<episode_id> to the src:

<iframe src="https://player.reelfork.com/d/<drama_id>?episode=<episode_id>" allowfullscreen></iframe>
Enter fullscreen mode Exit fullscreen mode

Episode IDs are listed in the embed panel when you pick a specific episode from the dropdown. Useful when you're writing a post about one chapter and want readers to land there rather than at the series start.

Where this is actually useful

The honest case for embedding isn't "reach" — it's context. A newsletter archive, a portfolio, a documentation page, a community forum thread: places where the reader already has a reason to care, and where sending them to a new platform loses most of them at the click.

Full docs: Embed interactive dramas on any website.

Top comments (0)