Logo

Vertical Video

Testing embeds vs native <video>

April 4th, 2024

  • Going for the “video postcard” style
  • Autoplaying and looped

No visible controls (for iOS?)

WINNER WINNER, BEST FOR ALL DEVICES - Without controls, so with just GIF-style looping

MAKE IT IG-STYLE BY GOING FULL HEIGHT ON DESKTOP TOO, NOT JUST MOBILE. That should also solve the “what if there’s more than one thing playing at a time?” problem. Makes it more narrative, like IG stories, just scrolling vertically instead of swiping or tapping horizontally.

Try mixing it up with interspersing photos too?

Initial tests for native <video>

GOOD FOR DESKTOP, CONTROLS SHOW ON MOBILE - controls autoplay playsinline muted

BAD - IMAGE IS SQUEEZED No autoplay, so you can see the poster image:

BAD: No playsinline, so you can see fullscreen effect on iOS:

BAD FOR GIF-STYLE: No playsinline or autoplay:

Thoughts

  • Autoplaying: not necessarily as annoying as you might think, if you treat it like an animated GIF that’s mainly decorative. Can also be a convenience where you don’t have to tap to play, tap to remove controls, etc.
  • Controls: can be left off if it’s a short looping video.
  • Playsline: Things get janky if you leave off playsinline, especially on autoplay. Hijacks the viewport in unexpected and unpleasant ways, plus it borked out with a black screen instead of playing the video. An exception might be if you leave off autoplay and they have to tap to play, and it goes fullscreen as a result, but even that feels like a stretch and that it might be invasive. Better to have good responsiveness if possible.
  • Responsiveness: shrinking the height creates a minor amount of jank, where the controls stay full width. I also probably haven’t optimized the width for larger screens or make it float within the main column.

Overall I’m still getting a feel for the type of content this could be good for. This was a fun series of experiments and I’ll come back to it later after perusing my archives to see what I’d like to collect into a single post.

If anything it’s renewed my itch to go back to making awesome photo albums instead, something responsive that looks great across all devices and reader types (vertical for phone, horizontal for desktop, and square for readers that might be mobile or desktop)

Embeds

Threads embed:

Post by @alabut
View on Threads

IG embed with caption:

Without caption:

Thoughts:

  • Worth it for offloading bandwidth, ease of publishing and dealing with player compatiblity?
  • Or worth tinkering with a more streamlined custom setup? It wasn’t that hard to copy/paste over the pics and caption for the post about Randy and Deathwish Coffee.