Picture in picture mode

I’ve been looking forward to the latest release (as of this writing) of Aesop Story Engine.

It’s been no secret that I’ve written the WordPress theme which drives EicheFam.net around the Aesop Story Engine plugin. I’ve been a big fan of it ever since its initial release, and no, they don’t pay me to say so. I just think it has great potential — even more so than the Gutenberg editor coming to WordPress 5.0. (But that’s a discussion for an entirely different post.)

Since ASE is an open-source plugin, I suppose it was only natural that I would eventually get involved with its development. As I noticed the occasional bug, I would raise an issue, to bring it to the authors’ attention, if nothing else.

I eventually started to tackle some of the bugs that I knew how to fix. And as my use of the plugin grew, so did some of my ideas for added features or functionality — which brings me to ASE’s 1.9.8 update.

With macOS Sierra, Apple introduced what they called Picture in Picture mode for videos:

With Picture in Picture, you can play video in a resizable window that isn’t blocked by other windows, so you can watch while doing other things. Catch up on a favorite show while you catch up on email, or watch the big game while playing a game yourself.

Apple Support

Watch this video on how to enable Picture in Picture mode in YouTube on macOS Sierra. Keep on scrolling to see it use ASE’s own picture in picture mode using the YouTube API. How meta!

It’s turtles all the way down.

I thought this was pretty cool. And as I usually do, I thought: How can I implement this on a website?

My initial thought was to make a standalone plugin which would enable a picture in picture mode for all videos, but I quickly realized this was too ambitious. The HTML markup is way too different between how WordPress embeds videos: even just self-hosted, YouTube, and Vimeo, to say nothing of the multitudinous other video hosting solutions out there.

I decided to scale back a bit, and instead use the Aesop Story Engine plugin. Thanks to YouTube and Vimeo providing APIs for automating video playback, the functionality I desired wouldn’t solely be limited to self-hosted videos.

The trickiest part of the whole thing was writing the CSS to be general enough to apply to any site running ASE. To some extent, the plugin behaves best on sites written specifically for it (wink, wink); but it also comes with a core set of styles for a reason — what good would the plugin be if you couldn’t just try it out on whatever theme your own site happens to be running?

Fortunately, ASE’s Video component maintains a pretty standard set of markup across the different embed types. It was easy enough from there to establish a placeholder (so the content didn’t jump when the video zoomed to the corner) and use CSS animation to make a path of motion for the video to follow when it shrank.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.