How to make a responsive video

Short answer

For a video tag a 100% width and automatic height are enough:

<video src="/media/flower.webm" controls style="width: 100%; height: auto;"></video>

The browser knows the file's proportions and works out the height by itself.

An embedded player

An iframe with a video from another site has no proportions, and its height stays at 150px. Set them with aspect-ratio:

<iframe src="https://example.com" title="Video" style="width: 100%; aspect-ratio: 16 / 9; border: 0;"></iframe>

A block as wide as the column gets a height of exactly 9/16 of its width. For vertical clips write 9 / 16.

Limiting the size

On a wide screen a full-width video can be too big. Limit it with max-width and center it:

<video src="/media/flower.webm" controls style="display: block; width: 100%; max-width: 320px; margin: 0 auto;"></video>

Common mistake

The old trick with a wrapper and padding-top: 56.25% still shows up in articles. It works but needs an extra element and absolute positioning. Today every browser supports aspect-ratio, so the trick is no longer needed.