A page to demo my video tag pull request to the tranquilpeak theme.
Feature branch of my fork here
Documentation of the feature here

The Video Tag

The video tag supports any mp4 video, as it’s widely accepted by modern web standards over other video formats. Mozilla Docs

All code examples have a ‘-‘ placed before the opening %. This should be removed when using the code, as it’s only included to avoid placing videos within this post itself.

Just a video with a caption

{-% video https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 a sample caption %}

‘nocaption’

{-% video nocaption https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 This won’t show %}

Percentage Width: ‘60%’

Height will scale accordingly

{-% video center https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 60% Percent Width of 60 %}

Alignment: ‘left’, ‘right’, ‘center’ (Default: left)

{-% video [left/center/right] clear https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 50% left caption %}

Extra div: ‘clear’

Works as mentioned in the image tag + noted in the documentation. ‘clear’ is used in the right aligned video above, so that text doesn’t overflow into the side. Not using clear in a small enough and side aligned video, allows for text to wrap around video.

{-% video center clear https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 50% Clear %}

‘autoplay’ (with ‘mute’) and ‘loop’

The video will autoplay as long as it’s muted. This is a standard from browser vendors in order to avoid annoying users.

{-% video center autoplay muted loop https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 50% ‘autoplay’ with ‘muted’ %}

Hide controls: ‘nocontrols’

Right click on the video for controls. Useful when using with autoplay and loop. Similar to using a gif within an image tag, except much more web friendly and fast. This purpose is the main reason for implementing the video tag.

{-% video center nocontrols autoplay loop muted https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 50% Controls off %}

Poster (Thumbnail)

{-% video center https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 https://peach.blender.org/wp-content/uploads/title_anouncement.jpg 50% Poster (Thumbnail) Enabled %}

Fig-20,25,… classes

Example usage of the fig-20,25… classes for automatic width. As noted in the documentation, fig classes automatically override to float left. Use custom width if ever needing to adjust the alignment in addition to custom size.

{-% video nocontrols fig-25 autoplay loop muted https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp Fig-25 Example %}

{-% video nocontrols fig-75 autoplay loop muted https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp Fig-75 Example %}