🎉 mp4 videos in articles

[ikesau]

A quick component for inline videos in our articles in advance of the Grapher redesign post.

I opted to implement this without syncing the file from Google Drive like we do for images, as we're likely going to refactor that code soon with CF Images anyway, and it'd be a lot of extra complexity for a feature we're probably not going to use very much.

This means we'll need to ensure our mp4 files are hosted somewhere stable (in my demo I'm using a DO bucket) - these will be tracked in the posts_gdocs_links table so we can keep an eye on them and make sure they're not 404'ing.

The filename property used with the poster attribute for the video, which is recommended if you're using preload="none" for the video element.

These images are getting baked and resized like all our other images, even though we're only using the source image for the poster. If we think it's worth it, we could add an event listener to pick a resized version for further mobile pagespeed improvements.

{.video}
url: https://owid-image-upload.nyc3.cdn.digitaloceanspaces.com/staging/bunny.mp4
caption: hello [world](https://en.wikipedia.org/wiki/World){ref}Refs work here too{/ref}
filename: bunny-poster.jpg
shouldLoop: true
{}

video.demo.mp4

[ikesau]

TODO: add documentation for this component once it's merged

[mlbrgl]

LGTM. I agree, not over-engineering this feature seems like a good call given how rarely we've reached out for videos until now.

[mlbrgl]

nit: .jpg?

[mlbrgl]

was updating/adding the explorer, image--wide and toc layouts intentional in this PR?

[ikesau]

yup, just alphabetised and removed some redundancies