Embeds, Loom, YouTube, Figma, more
When a video or interactive embed is worth the page weight, when it isn't, and the embed providers that work in a Docsio page.
An embed is useful when readers need to see a workflow or try an example. Pair it with written instructions so the page still works when the external service does not load.
When an embed is worth it
Use a short walkthrough for an interaction that is hard to explain with one screenshot. Use an interactive demo when experimenting helps readers understand the result. Prefer a static image for a single screen or diagram.
Add an embed
Copy the provider's public embed URL and use an iframe in an MDX page:
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Project setup walkthrough"
width="100%"
height="420"
loading="lazy"
allowFullScreen
/>Replace the example with your actual video. A normal watch-page or share URL is not always an embed URL. Services can restrict embedding, require sign-in or change their permissions.
Loom, YouTube, Figma and interactive demos
Use each provider's embed or share controls and check public access. Test the result while signed out. Do not assume a private design file will be visible to your documentation readers.
What to put right next to embeds
Include a short description, the important steps in text and a direct link to the original. Provide captions or a transcript for instructional video where possible.
Before publishing
Check mobile height, keyboard access and loading behavior. Avoid autoplay and unnecessary permissions. Keep embeds to the ones that help the task; every third-party player adds page weight and another dependency.