Embed a tutorial on a website with a usable fallback

There are two common routes. You can host the MP4 file yourself and place it in an HTML video element, which gives you control over the file, the poster image and the caption file. Or you can upload to a video platform and paste its embed code, in which case the platform’s player, encoding and rules apply.

If you use a platform, read its own embedding and sharing settings rather than assuming that every video can be embedded on every site. If you host the file, you are responsible for checking that it plays in the browsers your readers use.

MDN describes controls for the browser’s player and poster for the image shown before a video frame is available. Text inside the video element helps browsers that do not support that element. It is not a reliable error message for a broken file in a modern browser, so also place a visible direct-file link outside the player.

Do not autoplay a tutorial. MDN notes that modern browsers block autoplay for videos with an unmuted audio track, and a muted tutorial loses the narration that makes it useful. Let the reader press play.

1. Add controls and a poster image that shows what the reader will achieve, such as the finished settings screen.
2. Set preload to metadata as a request to fetch metadata before playback. This is a browser hint, not a download-size guarantee.
3. Provide source elements with accurate media types for the formats you offer, and test that the browser selects a playable version. Do not assume every playback failure triggers a useful fallback.
4. Put a direct-file link below the player, and optionally repeat it inside the video element for browsers without video support.
5. Below the player, repeat the essential steps as text, so the page is useful even if the video never loads.

Captions are attached with a track element pointing to a WebVTT file. MDN distinguishes captions, which include dialogue plus sound effects and other relevant audio, from subtitles, which transcribe or translate dialogue for people who can hear but not understand it. For a tutorial, captions is usually the right kind. Give the track a srclang and a readable label, and serve the file from the same origin as the page unless the video element has a crossorigin attribute.

W3C’s explanation of WCAG success criterion 1.2.2 says captions should identify who is speaking and include meaningful non-speech sounds. In a software tutorial that might be [error sound] when a form is rejected. Prepare captions in your chosen captioning tool and review any automatic transcript line by line before publishing.

Suppose you recorded an iPhone walkthrough of a password reset with Reel, with your face in a small corner overlay and your voice explaining each screen. Reel saves an MP4 file. An MP4 extension identifies the container, not a guarantee that every browser or device will decode the video codec inside it.

Before publishing, open the page on the browsers and devices your readers actually use. If one of them fails, export an additional H.264 copy from your editor and list it as a second source. Use a frame showing the confirmation screen as the poster, add a captions file, and put the five reset steps as text under the player. A reader on a slow connection can then follow the text, and a reader who cannot hear the narration can use the captions.

A file that plays on your desktop can still fail on the page because of a wrong path, a missing caption file or a server that does not send video correctly.

• Play the video from the published page on a phone and a computer.
• Turn captions on from the player menu and check that they appear in time with speech.
• Use the keyboard alone to reach play, pause and the caption control.
• Open the direct link and confirm it downloads or plays the same file.
• Check the poster loads before playback and does not look like a broken image.