Chykalophia Docs

How to add video to your website accessibly and without slowing it down, including hosting, embedding, and captions.

Video can be a powerful tool on a website — explaining a service, introducing your team, demonstrating a product, or sharing client testimonials. But video also has the potential to slow your site down, autoplay with unwanted sound, and exclude people who are deaf or hard of hearing.

This guide covers how to add video well.

Quick summary

Never host video files directly on your website — always embed from YouTube or Vimeo. Add captions to all videos. Never autoplay with sound. Keep videos short and focused. Provide a transcript so the content is accessible and searchable.

Where to host your videos

Do not upload video files directly to your website's hosting. Video files are enormous compared to images. A single unoptimized video can be hundreds of megabytes — enough to dramatically slow your site and hit storage limits.

Instead, host your video on a dedicated video platform and embed it on your site. The two most common options:

YouTube

Free to use
Very fast delivery worldwide
Automatically generates captions with speech recognition (which you should review and correct)
Shows related videos when a video ends. You can't switch them off in an embed; the most you can do is ask for them to come from your own channel
Uses your YouTube account — if you don't have a brand channel set up, content will appear under a personal account

Vimeo

A free plan plus paid plans for professional use; several features need a paid account, including automatic subtitles and the background-video embed that hides the player's controls
More control over how the player looks: its colors, its play button and controls, and a custom logo
Often preferred for higher-end brand presentation

We can discuss which is right for your project during setup.

How to embed a video

Once your video is uploaded to YouTube or Vimeo, you get an embed code — a snippet that you paste into your web page. On WordPress, Webflow, Squarespace, and similar platforms, you can usually paste the video URL directly into a video block and the embedding happens automatically.

If you're unsure how to embed a video on your specific platform, let us know and we'll do it for you.

Captions: required for accessibility

Captions display spoken words as text on screen. They are essential for:

People who are deaf or hard of hearing
People watching somewhere noisy, like an airport, or somewhere quiet, like a library
People who only partly understand the language being spoken
Anyone whose browser plays video without audio by default

Captions are a Level A requirement in WCAG — in WCAG 2.1 and the newer WCAG 2.2 alike — for all prerecorded audio in a video, so any site aiming at Level AA needs them. Captions also cover more than dialogue: they identify who is speaking and any sound that carries meaning, such as a meaningful sound effect.

YouTube auto-captions: YouTube uses speech recognition to create captions automatically, but they often contain errors — especially for names, industry terms, and accents. Always review and correct auto-captions before treating them as accessible.

How to edit YouTube captions: Sign in to YouTube Studio, select Subtitles in the left menu, then choose the video you want to edit.

Vimeo captions: Vimeo accepts SRT and WebVTT caption files (it recommends WebVTT, encoded as UTF-8) — upload them from the Languages button beside the player. Automatic subtitles come with paid accounts.

Transcripts

A transcript is the full written text of a video's content. It is separate from captions and provides:

Full accessibility for people who can't access the video at all
Searchability: a transcript makes the content findable by search engines and by people using your site's search
A quick-scan reference for people who prefer reading

Include the important non-spoken detail too, not just the dialogue: a description of what happens on screen, and sounds that matter.

Place the transcript on the same page as the video, or link to it immediately below.

Autoplay: use it carefully

Video that autoplays with sound is startling and unwelcome to most visitors. It is also an accessibility failure: WCAG asks that when any audio plays automatically for more than three seconds, there is a way to pause or stop it, or to control its volume separately from the volume of the device. Browsers restrict it too: Chrome, Safari and Firefox won't autoplay a video with sound unless it is muted or the visitor has already interacted with the page, so it often won't play anyway.

If you autoplay a video:

Mute it by default
Provide controls so users can pause it. WCAG asks for a way to pause, stop or hide anything that moves, starts on its own, runs for more than five seconds and sits alongside other content
Keep it short (under 30 seconds)

Background video loops are common in hero sections. They should always autoplay muted.

Keeping videos short

Shorter is safer: most visitors will not sit through a long video on a business website. We suggest keeping homepage videos under 90 seconds and keeping tutorial videos focused on one topic. If a topic needs more than five minutes, consider splitting it into several shorter videos.

Common questions

Do I need captions on a background video with no speech?

A genuinely silent clip has no audio to caption. As soon as there is an audio track, plan on captions: WCAG's captions cover the spoken words and any sound that carries meaning, so purely decorative music has nothing to convey, but anything a viewer would need to hear does. A background video with sound also needs a way to mute or stop it.

Can I use a video from YouTube that someone else made?

Only if you have permission or it is published under a license that allows this. Embedding a public YouTube video is generally acceptable (you're just pointing to it), but if you want to embed someone else's content on your site as your own, check their license and terms first.

Usually yes: most social platforms offer an embed code. However, these rely on those platforms staying available. If the original post is deleted, your embedded video breaks. YouTube and Vimeo are more reliable for video that needs to stay on your site long-term.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Using video on your website