Embedding explainers

An explainer doesn't have to live on scrimba.com. Any explainer you can link to, you can embed: paste its embed code into your page and the full player runs inside it, narration and all. This very docs site does it on every Python chapter.

Getting the embed code

Open the explainer, click the cog icon in the bottom-right corner of the player, and choose Copy embed code. That puts a ready-made iframe snippet on your clipboard, something like:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://scrimba.com/explain/guide0253irrth?embed=docs"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
    allow="autoplay; fullscreen"
    allowfullscreen>
  </iframe>
</div>

Paste it wherever your site takes HTML: a blog post, a docs page, a README rendered as HTML, a CMS block. The wrapper keeps the player at a 16:9 aspect ratio at any width.

What viewers see

Visitors don't need a Scrimba account to watch an embedded explainer. The visibility rules are the same as for the link itself: a public or unlisted explainer plays for everyone, while a private one only plays for people it's shared with, so set your explainer to at least unlisted before embedding it.

Each lesson in a playlist is a normal explainer with its own URL and its own embed code, so you can embed one lesson or several.