How to add a video to a page

Short answer

Insert <video> with the controls attribute — play, volume and fullscreen buttons appear:

<video src="/media/flower.webm" controls width="320"></video>

Without controls the video looks like a picture and can only be started from JavaScript.

A cover and responsiveness

poster sets an image visible before playback. To keep the video within the screen, limit its width as with images:

<video src="/media/flower.webm" controls poster="/media/photo-400x250.jpg" style="width: 100%; max-width: 400px; height: auto;"></video>

Several formats and subtitles

Instead of src, files can be listed in <source> — the browser takes the first one it can play. <track> adds subtitles:

<video controls width="320">
  <source src="/media/flower.webm" type="video/webm">
  <source src="/media/flower.mp4" type="video/mp4">
  <track kind="subtitles" src="/media/flower-en.vtt" srclang="en" label="English">
</video>

Videos from YouTube and other services

Other services' videos are embedded not with <video> but with an <iframe> using the code the service provides. See the article about embedding with an iframe.

Common mistake

<video> is given a link to a video hosting page, for example the address of a YouTube clip. The element can only play the video file itself (WebM, MP4), and a website page is not a video for it, so the player stays empty.

Thanks for reading!