Content: videos

Blurry handles videos a little differently from some other static site generators by overloading the regular Markdown image syntax to support videos, too. Video files whose extensions are listed in the VIDEO_EXTENSIONS setting will be embedded using a <video> embed element.

Example

For example, this Markdown:

![My Video](./videos/my-video.mp4)

Will result in this HTML:

<video controls="" width="1920" height="1080">
    <source src="/videos/my-video.mp4" type="video/mp4">
</video>

See the width and height? That helps guard against cumulative layout shifts, which can cause a poor page experience for visitors, especially on smaller devices, when content shifts down as more content finishes loading above it.

Styling

Adding a bit of CSS can make a video responsive:

video {
    max-width: 100%;
    height: auto;
}