Inline Video: Rules and Examples
Use inline video with a descriptive label, useful poster frame, captions, and a complete transcript so every reader and machine can understand it clearly.
An inline video is a hosted or externally embedded recording placed inside the article’s reading flow to demonstrate, explain, or document one bounded idea. It includes a visible label, a deliberate poster frame, playback controls, captions, duration, and a complete transcript. Without those surrounding words, an unlabelled player is invisible to every reader who cannot or chooses not to watch—and nearly empty to systems that extract text rather than decode the recording.
Filter pages that need review
Watch the editor open the Freshness report, apply the Needs review filter, and confirm the result count before assigning work.
Read the transcript
00:00–00:18 — Open the report. From Audit, open Freshness. The report lists tracked URLs with their freshness status and recorded update date.
00:19–00:54 — Apply the filter. Open Status and choose Needs review. The result count changes, and the selected filter remains visible above the table.
00:55–01:30 — Verify the queue. Confirm that every visible row carries the expected status before assigning pages. Clear the filter to return to the full inventory.
The pending poster comment is a capture specification, not an asset reference. The surrounding HTML demonstrates the required reading order before media production is complete.
Why this element matters
Video reduces explanation cost when movement, timing, voice, or change over time carries meaning. A reader can see how a menu opens, how a physical product moves, or how a speaker qualifies a conclusion. Watching requires attention, sound or captions, time, and often more data than reading, so a clear label and duration let the reader judge that cost.
Poster frames influence that decision before playback. A representative still acts as a visual promise of what the recording contains. A random frame with closed eyes, a loading spinner, or an unrelated title card makes the content look careless and forces the reader to press play to discover its subject. The poster should reveal the state, person, object, or outcome the video actually explains.
Machine extractability is the ability of software to recover a content unit’s meaning without reproducing its presentation. A bare iframe usually exposes little more than a provider URL. A labelled element exposes a title, summary, duration, date, poster, captions, transcript, and stable identifier. Search, translation, accessibility, and retrieval systems can then understand the bounded explanation.
The transcript is therefore part of the element, not an optional download. It preserves spoken claims, speaker changes, meaningful sounds, and visual actions in document order. Captions support the playback experience; the transcript supports the page. Follow the shared element writing rules for semantic precedence, directive syntax, and body mapping. This page takes precedence where it requires a transcript, poster, duration, and video-specific accessibility fields.
When to use it
Use inline video when time-based evidence makes a bounded point clearer than still images and prose. Suitable cases include an interface operation, physical technique, visible transition, expert explanation, motion-dependent product behavior, or recorded result whose delivery is evidence.
Apply a replacement test before commissioning the recording. If one screenshot and two sentences explain the point equally well, use them: they load faster, scan faster, and cost less to update. Video earns its place when sequence, pace, movement, voice, or observed behavior changes understanding.
Near-miss cases include:
- A long webinar inside an unrelated paragraph: link to a dedicated video page or use a full video embed section. An inline element must serve the local argument, not import an hour of adjacent subject matter.
- A silent looping decoration: that is motion design, not editorial video. Remove it or treat it as decorative media with reduced-motion behavior.
- A screen recording used instead of instructions: write the steps and success state in text. The video may demonstrate them, but it cannot be the only way to complete the task.
- A customer quotation clipped without context: a short clip can support a case study only when the speaker, relationship, recording date, approval, and surrounding claim are disclosed.
- A video whose only value is personality: use it only when voice, delivery, or the speaker’s authority is relevant. Do not make readers watch a presenter recite copy already on the page.
- Several peer clips: use a gallery or dedicated media section when selection among recordings is the task. Do not stack inline players.
Where to place it
Place the video immediately after the paragraph naming what the reader will learn or observe. Put its title, duration, and summary before the player. Place the transcript directly after it, collapsed only when the complete text remains in HTML without playback code.
In a procedure, put the player after the written action sequence and before troubleshooting. The reader should be able to act without watching, then use the recording to confirm motion or interface state. In an argument or case study, state the claim before the recording and interpret its limits after it.
Do not place it beside another player, autoplaying animation, large call to action, form, or calculator. Competing controls create unclear focus. Do not put it inside a table cell, list item, callout, tab, carousel, accordion panel, or clickable card. The transcript may use a disclosure control; the entire video must not.
Keep the title, summary, poster, player, duration, transcript control, and credit inside one figure boundary. A source note may immediately follow. Never separate the player from its transcript with an advertisement, promotion, or unrelated section.
Anatomy
- Visible title: Names the task, demonstration, event, or claim in specific HTML text.
- Summary: Explains in one sentence what the reader will see and why it matters.
- Duration: States the viewing cost before playback in minutes and seconds.
- Poster frame: Shows a representative, approved frame without pretending to be a button on its own.
- Player controls: Provide play, pause, seek, volume, full-screen, playback speed, and caption access.
- Captions: Synchronize dialogue, speaker changes, and meaningful non-speech audio with playback.
- Transcript: Reproduces the complete meaningful sequence as selectable, searchable HTML text.
- Visual descriptions: Record meaningful onscreen actions or changes that narration does not state.
- Credit and source: Identify the speaker, creator, recording date, or evidence provenance when relevant.
The title is not the filename, and the summary is not “Watch the video below.” Each must remain useful when copied without the player.
Design examples
All variants share the same content contract. Delivery changes; labelling, captions, transcript quality, playback consent, and reading order do not.
Hosted demonstration
Use a first-party HTML5 player for a short product or process recording when the organization controls encoding, captions, poster selection, and availability.
Privacy-conscious external embed
Use an external platform when its delivery, analytics, or established channel is required. Load the provider only after consent where policy requires it, identify the provider before activation, and preserve the local transcript even if the provider removes the recording.
Short interface clip
Use a concise clip for one state change that is difficult to communicate with still images. It still needs controls, a pause mechanism, a meaningful text description, and a transcript; do not turn it into an automatically looping GIF.
Interview or evidence clip
Use a speaker-led clip when authorship, wording, or observed testimony matters. Show the person’s name and role in HTML, disclose edits, and transcribe both speech and material visual evidence.
Parameters
These fields form the portable content contract. Width, border, shadow, play-button style, and breakpoint behavior belong to the renderer.
| Name | Type | Required | Min/max | Default | Source |
|---|---|---|---|---|---|
title | Plain string | Yes | 4–12 words; 90 characters maximum | None | First heading in body |
summary | Plain sentence | Yes | 15–35 words; 220 characters maximum | None | First paragraph after heading |
src | HTTPS or root-relative URL | Yes | One stable media URL | None | Parent attribute |
provider | Enum | Yes | hosted, youtube, vimeo, or approved provider | hosted for root-relative media | Parent attribute |
poster | HTTPS or root-relative image URL | Yes | One existing image; 16:9 preferred | None | Parent attribute or approved media record |
duration | ISO 8601 duration | Yes | 5 seconds–20 minutes | None | Parent attribute and visible label |
captions | WebVTT track or provider caption ID | Yes | At least one track in the spoken language | None | Parent attribute or approved media record |
transcript | Structured text | Yes | Complete meaningful content; normally 50–3,000 words | None | Body after summary |
language | BCP 47 language tag | Yes | One primary language | Page language | Parent attribute |
uploadDate | ISO date | Yes | One exact date | None | Parent attribute or media record |
speaker | Plain string | When a person speaks on authority | 2–80 characters per speaker | None | Body transcript labels or media record |
credit | Plain string | When rights or provenance require it | 2–120 characters | None | Parent attribute or approved media record |
transcriptOpen | Boolean | No | true or false | false | Parent attribute |
The first body heading maps to title; the first paragraph maps to summary; the remaining body maps to transcript. Transcript time ranges are optional for a continuous single-speaker explanation and recommended for procedures, speaker changes, and recordings longer than two minutes. autoplay, loop, and background-audio fields are deliberately absent.
Syntax and code examples
Each notation preserves the same title, summary, media metadata, captions, and transcript. The example domains describe the contract and are not production asset references.
Portable Markdown directive
:::inline-video{src="https://media.example.com/freshness-filter.mp4" provider=hosted poster="https://media.example.com/freshness-filter-poster.webp" duration="PT1M30S" captions="https://media.example.com/freshness-filter.en.vtt" language=en uploadDate="2026-08-27"}
## Filter pages that need review
See how to apply the Needs review filter and verify the resulting work queue.
**00:00–00:18 — Open the report.** From Audit, open Freshness.
**00:19–00:54 — Apply the filter.** Open Status and choose Needs review.
**00:55–01:30 — Verify the queue.** Confirm that every visible row has the expected status.
:::
Hugo shortcode
{{< inline-video src="https://media.example.com/freshness-filter.mp4" provider="hosted" poster="https://media.example.com/freshness-filter-poster.webp" duration="PT1M30S" captions="https://media.example.com/freshness-filter.en.vtt" language="en" uploadDate="2026-08-27" >}}
## Filter pages that need review
See how to apply the Needs review filter and verify the resulting work queue.
**00:00–00:18 — Open the report.** From Audit, open Freshness.
**00:19–00:54 — Apply the filter.** Open Status and choose Needs review.
**00:55–01:30 — Verify the queue.** Confirm that every visible row has the expected status.
{{< /inline-video >}}
This is the intended adapter contract, not a claim that a local shortcode exists. It uses named parameters only. Until a renderer is registered, use semantic figure, video, track, and transcript HTML that preserves the same fields.
WordPress block
<!-- wp:amicited/inline-video {"src":"https://media.example.com/freshness-filter.mp4","provider":"hosted","poster":"https://media.example.com/freshness-filter-poster.webp","duration":"PT1M30S","captions":"https://media.example.com/freshness-filter.en.vtt","language":"en","uploadDate":"2026-08-27"} -->
<h2>Filter pages that need review</h2>
<p>See how to apply the Needs review filter and verify the resulting work queue.</p>
<video controls preload="metadata" poster="https://media.example.com/freshness-filter-poster.webp">
<source src="https://media.example.com/freshness-filter.mp4" type="video/mp4">
<track kind="captions" srclang="en" src="https://media.example.com/freshness-filter.en.vtt" label="English" default>
</video>
<details><summary>Read the transcript</summary><p><strong>00:00–00:18 — Open the report.</strong> From Audit, open Freshness.</p><p><strong>00:19–00:54 — Apply the filter.</strong> Open Status and choose Needs review.</p><p><strong>00:55–01:30 — Verify the queue.</strong> Confirm that every visible row has the expected status.</p></details>
<!-- /wp:amicited/inline-video -->
If the registered WordPress block is unavailable, use native Video, Heading, Paragraph, and Details blocks. Do not paste an iframe and omit the local transcript.
Examples
Good: a bounded demonstration with a reading alternative
Filter pages that need review · 1:30
The video shows one task: opening a freshness report, applying a status filter, and checking the result count. Its poster shows the open filter, the captions identify interface labels exactly, and the three-part transcript records every action and success check. Playback begins only after activation.
This works because a reader can predict the value and time cost, watch with sound, watch with captions, or complete the same task from the transcript. The recording adds motion and state-change evidence without becoming the only instruction.
Bad: an unlabelled player
Watch this
A third-party iframe loads automatically beneath the heading. Its poster is a black frame, no duration appears, captions are provider-generated and unreviewed, and the page contains no transcript or summary.
The bad version makes every non-watching reader guess. It gives extractors no subject, asks privacy-conscious readers to contact a provider before choosing playback, offers no durable text when the recording disappears, and can announce incorrect captions as fact. Repair it with a specific title and summary, deliberate poster, duration, consent-aware loading, reviewed captions, complete local transcript, and a written task or claim outside the player.
Schema markup and accessibility
Inline video does not automatically create a schema entitlement. Use VideoObject only when the page visibly supplies accurate name, description, thumbnailUrl, uploadDate, duration, and contentUrl or embedUrl values for the accessible recording. Never invent fields to satisfy a validator or mark a decorative clip as primary video.
A relevant video may support an eligible Article, HowTo, or Product when the page independently qualifies. Its transcript cannot justify claims or steps absent from the visible page.
Accessibility begins before playback. Label the figure, show title and duration in text, and give controls keyboard operation and visible focus. Never autoplay. Provide pause, seek, volume, speed, captions, and full-screen. Do not trap focus in a third-party player; after full-screen closes, return it to the initiating control.
Captions must be synchronized, punctuated, and reviewed against the recording. Identify speakers when the voice is not obvious and include meaningful sounds such as “[notification tone]” when they affect understanding. Audio description is required when meaningful visual information is not stated in the main audio; a descriptive transcript alone does not make the timed playback experience equivalent.
The transcript must be real HTML in logical order—not canvas, playback-only content, hidden text, or a PDF-only download. Disclosure controls need an accessible name and expanded state. Player and transcript must work at 200% zoom and narrow widths without page-level horizontal scrolling.
Writing rules
The words around the player determine whether the video is a content element or an unexplained object:
- Write a specific title of 4–12 words. Name the task, demonstration, speaker, event, or finding; never use “Video,” “Watch this,” or “Learn more” alone.
- Write one summary sentence of 15–35 words that tells the reader what happens and why it matters. Do not repeat the title.
- Keep inline recordings focused and normally under five minutes. The hard maximum is 20 minutes; longer recordings belong on a dedicated page or need editorial segmentation.
- Show duration before playback. Use
M:SSfor visible text and ISO 8601, such asPT1M30S, in structured fields. - Choose a poster that represents the subject at normal display size. Avoid blank frames, spinners, accidental expressions, deceptive play buttons, tiny interface text, and unapproved personal or customer information.
- Review captions against the final edit. Fix names, product labels, numbers, domain terminology, punctuation, speaker changes, and meaningful sounds.
- Transcribe all meaningful speech and visuals. Summaries, chapter titles, and auto-generated caption files do not replace the transcript.
- Use short transcript paragraphs, speaker labels where needed, and time ranges around procedural stages or topic changes. Do not manufacture quotations from paraphrased speech.
- State edits that could change interpretation. Do not splice a testimonial, experiment, or demonstration so that the sequence implies an unsupported result.
- Keep essential instructions, prices, warnings, eligibility conditions, evidence, and calls to action outside the recording. A reader must not have to scrub a timeline to find a consequential fact.
- Never place autoplay, flashing content, background audio, conversion overlays, gated transcript fields, or a second player inside the element.
- Record the media owner and review trigger. Recheck the video when the interface, policy, product behavior, speaker attribution, or surrounding claim changes.
Post types that use it
The postTypes frontmatter array drives this matrix. Inclusion permits inline video when time-based evidence adds meaning; it does not require a player on every page.
| Post type | Use | Preferred position | Video earns its place when |
|---|---|---|---|
| How-to guide | Recommended for motion-sensitive steps | After complete written steps; before troubleshooting | Sequence, timing, hand movement, or interface state is difficult to confirm from stills. |
| Ultimate guide | Optional | Inside the one section it directly supports | A short recording deepens one bounded concept without interrupting navigation through the guide. |
| Product page | Conditional | After the capability and constraint are stated | Observed product behavior proves more than promotional montage or narration. |
| Feature page | Recommended for demonstrable software behavior | After mechanism; before outcome proof | The recording shows the feature producing the stated state or result under disclosed conditions. |
| Use-case page | Optional | Within the workflow or evidence section | A role-specific workflow becomes easier to judge when readers can observe it. |
| Case study | Conditional on approval and provenance | Beside the testimony or observed evidence it supports | The clip preserves attributable wording or documents behavior without overstating causation. |
| Documentation article | Recommended only for visually ambiguous tasks | After textual instructions; before verification | The user benefits from seeing interaction timing or a transient interface state. |
| Review page | Conditional | Beside the tested criterion or verdict evidence | The recording documents real operation, sound, motion, or a limitation under stated test conditions. |
QA checklist
- The video adds time-based meaning that a still image and concise prose cannot communicate as well.
- The visible title names the recording specifically, and the summary explains its value before playback.
- Duration appears before the reader activates the player.
- The poster is representative, legible, approved, and free of private or misleading content.
- Playback never starts automatically, loops unexpectedly, or produces sound without a reader action.
- Play, pause, seek, volume, speed, captions, and full-screen controls work with keyboard and touch.
- Captions match the final edit and correctly preserve names, numbers, speaker changes, and meaningful sounds.
- Meaningful visuals not conveyed in speech receive audio description or an equivalent alternate version.
- The complete transcript is selectable HTML, follows the recording’s order, and describes necessary visual actions.
- Written instructions, warnings, conditions, evidence, and calls to action remain available outside the video.
- External provider loading follows applicable consent rules, and the provider is identified before activation.
- The player, label, and transcript remain one semantic figure and are not interrupted by unrelated content.
- The element is not nested inside a table, list, callout, tab, carousel, accordion panel, or clickable container.
- The recording and transcript work at 200% zoom, narrow widths, reduced motion, and without JavaScript-only meaning.
- Any
VideoObjectfields match visible, verifiable media metadata and the accessible recording. - The selected post type appears in
postTypes, and the placement matches the matrix above. - The media owner, rights, recording date, and conditions for review or replacement are recorded.
FAQ
Does every inline video need a transcript?
Yes. Captions serve synchronized playback; the transcript serves reading, scanning, search, translation, quotation, accessibility, and extraction. It must contain the complete meaningful content, including visual actions that speech does not explain.
Can the poster frame contain the video title?
Yes, but the same identifying information must also appear in HTML text. Poster text may be unreadable on a small screen, unavailable when images fail, and inaccessible to software that does not interpret pixels.
Should an inline video autoplay?
No. Autoplay consumes data, interrupts reading, introduces unsolicited motion or sound, and removes the reader’s choice about when to engage. Start only after an explicit activation.
Are captions and a transcript the same thing?
No. Captions are timed to playback and include relevant sound cues. A transcript is a durable reading alternative organized in the recording’s sequence and enriched with necessary descriptions of meaningful visuals.
Does an inline video require VideoObject schema?
No. Add VideoObject only when accurate visible metadata and a stable recording support it. A player without a trustworthy name, description, poster, upload date, duration, and media URL should not generate incomplete or invented markup.
More tutorials in this section
Ready to put it into practice?
Free check · 7-day trial · no credit card