Little Window, Big Window

Reflections on YouTube Picture in Picture for Chrome

Earlier this year, I hacked together a Chrome Extension that brings the picture-in-picture feature from YouTube’s iOS and Android apps to youtube.com via a Chrome extension.

Shameless plug: Get It Here 📺.

When the picture-in-picture first came out, it dramatically changed the way I used YouTube on my phone. I use YouTube a ton and love videos, so I was both curious and impatient to find out if and how it’d translate to a desktop interface so I decided to scratch my own itch over the holidays. It’d also be a good opportunity for me to write code again — I missed it! — and learn something new.


Motivations and Goals

The project was primarily an experiment in interaction design. Namely, I was wondering:

  • What effect would picture-in-picture have on my typical desktop YouTube workflows?
  • How well would navigational interactions (minimize, maximize, open new video, close, etc.) translate to a desktop website? What role does browser navigation play?
  • Would I use youtube.com more frequently or discover more/different use cases for it?
  • How much do people want this feature on youtube.com? I figured that if I could get the extension out there, it might serve as a rough signal of interest from Chrome power users, who I’d assume overlap reasonably with relatively highly engaged YouTube users. It’d also provide a sense of the answers to the first three questions for those users.

My goal was to make something that felt like a native part of the YouTube web app. For that reason, I ruled out implementations using detached/floating Chrome windows. Those already existed anyway, and I wanted to see how it’d feel like if YouTube had done it.

Design principle: I wanted to build a product that felt like something YouTube could have released

Requirements and Design Decisions

Since my goal was to bring the mobile experience to the desktop, I just focused on nailing the core requirements in a straightforward way. I also felt that I’d learn a lot more by shipping the experiment than spending a lot of time iterating prior to release, so I relied on fairly battle-tested interface patterns and tried to achieve a look & feel that felt native to youtube.com so that usability wouldn’t be an issue.

Requirements

As a user, I want

  • To see the PIP player when I’m not on a video page.
  • It to continue playing my video uninterrupted as I navigate between pages
  • It to play normally, the way I’m used to, on a video page
  • A way to re-open a minimized video playing in the corner, like on mobile
  • A way to close the player

Interface-wise, I chose to add controls for the PIP player above because the YouTube player itself already has a lot of stuff in it and I didn’t want people to have to relearn how to use it just for my extension.

After using a couple prototypes, I found myself wanting a way to make the player bigger for videos with more detail, so I added that in too.

Technical Approach

The first versions of the extension were very, very hacky, since I wanted to get a feel for some of the answers to the above before I invested a lot of time scaffolding and building something. I started from the simplest possible way to get a picture-in-picture window on screen and built outwards from it. It went like this:

  • Start with an implementation that creates a picture in picture widget from the right-click menu, since it allows for simplest testing
  • Figure out how to get it to stay on the screen between pages
  • Add basic controls (open/close, change size) and state
  • Now figure out how to integrate it with video pages, i.e. the inline player
  • Figure out how to transition between video pages and non-video pages, i.e. inline player ← → picture-in-picture player

The architecture ended up looking like this:

Technical Challenges and Trade-Offs

There were a few features that I had to cut from the MVP.

Autoplay and Playlists

Challenge: Keeping the video playing uninterrupted through page navigation

The good news: YouTube uses SPF, which means pages aren’t reloaded on navigation and you can keep things untouched in the DOM between them. Initially, I wanted to just move the native movie_player element around — that way, we’d automatically be at feature parity with normal YouTube. Unfortunately, there appears to be some logic that prevents it from playing when not on a video page, so I went with a workaround that replaces it with an embedded iframe player.

This means that we don’t get features like Autoplay (Up Next), and Playlists don’t work. Bummer. Since the goal was experimentation and those features aren’t core to the PIP experience, I decided to ship the MVP without them and see how much they’d be missed by users (spoiler: they were missed).

PIP player when reading comments

Challenge: Reacting to scroll position

A natural extension of the player’s use cases, and a request from friends and others. It worked well, but caused erratic behavior when transitioning to a non-video page. The issue was that SPF renders and sometimes alters the scroll position of the page upon navigation, so scroll events weren’t a reliable signal. I kept the branch to come back to later.


Shipping the beta

I shipped the initial beta on January 12, 2016. This meant making some artwork for the Chrome Web Store.

Per my design principle, I did a few quick iterations of logos that felt Youtube-y (but not deceptively so). It was important that it was instantly recognizable as YouTube-related amongst other icons in the Web Store.

Icon iterations

The icon needed to work in both large and tiny sizes since it’d be used in both marketing material and interface. This ruled out a number of the more complex options; in the end, I went with solid colors and simple shapes that could be easily recognized at any size.

Works in all sizes

I also did a few screenshots and banners describing the extension’s features. I decided on direct and descriptive because people probably already understand the benefits from using the mobile version, and it was more important that someone with limited attention span could immediately grasp what the extension was and did. It also made it easier for people to spread the word and explain what the extension did to others.

There was some early feedback that a video would go a long way in helping people instantly understand the extension, so I did a quick screen capture — the one you see at the beginning of this writeup. This ended up having a huge impact on people spreading the word, since it was easily embeddable in news articles and blog posts, as well as discoverable on YouTube itself.


Reception

The extension had a pretty positive reception and was more popular than I expected!

I tweeted it and posted it to Facebook and ProductHunt, where it was featured.

Then, it was somehow picked up by CNet, TheNextWeb, LifeHacker, and other news sites.

News coverage!

That was when the active user count shot up and hit 9,000, then 11,000, then 15,000, with 18,000 impressions and 3,000 installs per day.

As of this writing, the count’s at a little over 26,000.


User insights, lessons, and iterations

With the extension in the wild for a few months, I’ve learned some interesting things about the way people use YouTube, as well as what it’s like to maintain a minor product with a nontrivial number of users.

There were two recurring themes amongst the Web Store reviews, direct feedback, and informal interviews & observation with users I knew.

Requests for Autoplay (Up Next) and Playlist Support. 
These are the top two requests I’ve seen (support for Theater Mode is #3).

Pretty interesting stuff — I’d originally written off Autoplay and Playlists as nice-to-have, power user features that wouldn’t be overly missed. Giving it more thought, there are probably two things going on here:

  1. The cohort of people leaving feedback probably do skew towards power users, but,
  2. Their desired usage can be a clue as to more common but unarticulated unmet needs.

Specifically, I’d noticed that users I knew found most value in the extension when using YouTube for music. People I talked to said that it’d often go down like this: they’d listen to a specific song or music video on YouTube, then want to leave it playing as a “related songs” radio much like how they might use Spotify or Pandora. Sometimes, hearing one song made them want to hear a certain other one; PIP was useful because they could search for it while the current one was still playing, but the fact that it killed the “radio” functionality provided by Up Next and Playlists was a no-go.

There’s an opportunity for a future iteration of the extension to

  • Work alongside Autoplay/Up Next and Playlists, and
  • Make it easy to queue up songs that come to mind, and
  • Manage that queue (re-order, delete) without too much hassle

In this way, the extension can enable a “set it and forget it” style music playing — trust the recommendations and playlists, and occasionally add in new songs yourself without interrupting playback.

I like the way that the YouTube TV app via Chromecast tackles this for groups in social situations — we recently tried it at a housewarming and it was a seamless group DJing experience. I may steal some of those ideas 😏

YouTube is already great at recommendations, has the added benefit of video, and is home to tons of original content. At If this use case were successfully solved for, I could see people using YouTube more and more as a music service; you’d see a respectable engagement bump and likely longer session times. You’d probably also see more binging on both music and videos.

Bugs. 
Because my extension interfered with normal YouTube behavior by freezing its video player and replacing it with my own widget, bugs were not infrequent. The consequences were tangible: after the rate of new installs tapered off, I noticed that the active user count was actually decreasing by a couple hundred a day — a signal that people were uninstalling the extension because it wasn’t stable enough for stress-free use. It was a reminder of the importance of getting the fundamentals right.

The extension needed a simpler way of listening to events, managing state and updating its interface, so I ended up rewriting a big chunk of it in React for the April 18th update. This made it much easier to pinpoint and fix bugs, and in the latest release, the majority of them are squashed. Active user growth rate is now once again positive.


It’s been a blast working on YouTube Picture in Picture as a side project and I plan on continuing for the foreseeable future (read: until YouTube makes it redundant by shipping an official version). I find it personally very useful and love being able to quickly uncover and test ideas that impact how people use something I use every day.

Like what you read? Give Willy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.