Adding videos

The docs site supports embedded videos on any page. Use them for walkthroughs, demos, training, or to complement a static screenshot when motion explains the flow better than text.

Guidde

Guidde is the recommended tool for product walkthroughs — it captures screen, generates the script, and gives you both a video and a written transcript.

To embed a Guidde playbook:

<iframe
  src="https://embed.app.guidde.com/playbooks/9VYRA5njRt2NFTNofMBEyF"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  loading="lazy">
</iframe>

The playbook ID comes from the share URL. For example, https://app.guidde.com/share/playbooks/9VYRA5njRt2NFTNofMBEyF → the ID is 9VYRA5njRt2NFTNofMBEyF.

A live example:

YouTube

<iframe
  width="100%"
  height="500"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Title for screen readers"
  frameborder="0"
  allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy">
</iframe>

Get VIDEO_ID from the YouTube URL: youtube.com/watch?v=VIDEO_ID or youtu.be/VIDEO_ID.

Vimeo

<iframe
  width="100%"
  height="500"
  src="https://player.vimeo.com/video/VIDEO_ID"
  title="Title for screen readers"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
  loading="lazy">
</iframe>

Self-hosted video

For short clips (under 10 MB) committed to the repo, drop the file into site/src/assets/videos/ and reference it directly:

<video controls width="100%" preload="metadata">
  <source src="/tero-docs/_astro/feature-demo.mp4" type="video/mp4" />
  Your browser doesn't support embedded video. <a href="/tero-docs/_astro/feature-demo.mp4">Download the file</a>.
</video>

For larger files (10 MB+), use a CDN or a service like Bunny Stream / Cloudflare Stream — don’t commit large binaries to the repo.

Guidelines

• Keep videos short. 1–3 minutes is ideal; longer videos are skipped.
• Pair video with text. Some readers prefer reading; some prefer watching. Provide both.
• Caption everything. Either burn captions into the video, or upload to YouTube/Vimeo with a transcript.
• Lazy-load. Always include loading="lazy" on iframes — videos don’t load until scrolled into view.
• Don’t autoplay. It surprises readers and burns bandwidth.

When to use video instead of (or with) text

Use video	Use text	Use both
Multi-step flow with cursor movement	Single screen + form fields	Important workflows (e.g. completing a job, setting up PM)
Drag-and-drop / spatial interactions	Lists, configuration, reference	First-time-user onboarding pages
Mobile gestures, scanning a QR	Permissions and roles	Sign-up / login pages