Hugo should have an internal shortcode a theme component for embedding videos using the video element so we can get our sweet video content ripped—I mean, downloaded—with the Video DownloadHelper onto our sites.
Anyone have a good implementation to start with? Looking for something responsive with a configurable aspect ratio and optional progressive enhancement for JS-supporting user agents.
Here’s a place to start: https://github.com/search?q=video+path%3A%2Flayouts%2Fshortcodes&type=Code
A shortcode feels like overkill when you can just have something like this:
<video controls src="/media/examples/stream_of_water.webm"></video>
Simple is ideal. Getting at least the basic attributes parameterized would improve reuse. And sometimes there’re several formats made available to improve UX or better support the HTML of yesterday. I’m going to drop some reference implementations in here to at least save others work looking for these later.
Reference Implementations annotated to note why they’re relevant/useful with the best I’ve seen on top.
Documentation, accessibility text, named and unnamed params, multiple sources optional poster image and Progressive Enhancement using JS.
Basic example with multiple sources and accessibility text:
With multiple sources, poster, playback controls and accessibility text:
A more intelligent shortcode with optional poster attribute, missing accessibility text:
With named or unnamed params and even better accessibility:
Using the Hugo Page Resources feature to feed the shortcode for config-driven modification:
You’ve asked for it, here it is!
Comments welcome!