Adding Videos

Videos are a great way to walk readers through a workflow. There are three options depending on what you have available.

---

Option 1 — Embed an MP4 Video File

If you have a video file (e.g. a screen recording), place it in the following folder:

apps/help/public/videos/

Then embed it in your article using this block:

<video
  controls
  width="100%"
  style={{ borderRadius: "8px", marginBottom: "24px" }}
>
  <source src="/videos/your-video-filename.mp4" type="video/mp4" />
  Your browser does not support video playback.
</video>

Replace your-video-filename.mp4 with your actual file name. The video will display with playback controls so readers can play, pause, and scrub through it.

---

Option 2 — Embed a YouTube Video

If the video is already on YouTube, you can embed it directly. You will need the video ID — the string of characters at the end of the YouTube URL.

How to find the video ID:

A YouTube URL looks like this:

https://www.youtube.com/watch?v=dQw4w9WgXcQ

The video ID is the part after v= — in this example it is dQw4w9WgXcQ.

Embed block:

Copy this block into your article and replace YOUR_VIDEO_ID with the actual ID:

<div
  style={{
    position: "relative",
    paddingBottom: "56.25%",
    height: 0,
    overflow: "hidden",
    borderRadius: "12px",
    marginBottom: "24px",
  }}
>
  <iframe
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    title="Describe what this video shows"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      border: 0,
    }}
  />
</div>

The video will be fully responsive and fill the width of the article.

---

Option 3 — Video Placeholder (Coming Soon)

If a video is planned but not ready yet, use this placeholder so readers know one is coming:

<div
  style={{
    background: "#F1F5F9",
    borderRadius: "12px",
    padding: "48px 24px",
    textAlign: "center",
    marginBottom: "24px",
  }}
>
  <p style={{ color: "#475569", fontSize: "14px" }}>
    Video tutorial coming soon: Your Topic Here
  </p>
</div>

Replace Your Topic Here with a short description of what the video will cover, for example:

Video tutorial coming soon: Logging a Dispense

---

Need Help?

If you are unsure how to record a screen or export a video file, ask a developer or team member for help. For YouTube videos, make sure the video is either public or unlisted before embedding — private videos will not play for readers.