# "Picture in Picture" with oneboxes?

**URL:** https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423
**Category:** Feature
**Created:** [April 4, 2017, 12:37pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423 "2017-04-04T12:37:24Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![\_vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_vincent/32/119557_2.png) [@\_vincent](https://meta.discourse.org/u/_vincent)
#### Post date: [April 4, 2017, 12:37pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/1 "2017-04-04T12:37:24Z")

</div>

Hi!

I’m not familiar at all with Discourse’s codebase, and I didn’t actually write any code for a long time, so I thought I might as well post my idea in here.

I wonder if some sort of PIP feature (I guess that is how it’s called) could be implemented in Discourse.

Basically, I would like to be able to keep browsing the forums after I started playing content in a onebox (youtube, soundcloud, etc.). Even if I clicked the top logo and went back to the homepage of my forums, the video would still be playing in a hovering little box.

While I’m not able to reproduce that behaviour at the moment, I’m pretty sure Facebook sometimes did that with videos on the homepage when you kept browsing to the bottom.  
It also happens on the android youtube app, when you go back to search results while a video was playing.

Hope that’s clear enough.

Thanks 🙂

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [April 4, 2017, 12:56pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/2 "2017-04-04T12:56:35Z")

</div>

This might be complex to do as we are unloading DOM elements from the posts that aren’t in the viewport.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 4, 2017, 1:03pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/3 "2017-04-04T13:03:19Z")

</div>

I don’t think the unloading it too much of a problem, this would be a distinct element outside of topic-view, always docked to bottom right or something.

I think it is pretty straight forward to do in a plugin.

---

<div class="post-metadata">

### Author: ![\_vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_vincent/32/119557_2.png) [@\_vincent](https://meta.discourse.org/u/_vincent)
#### Post date: [April 4, 2017, 5:32pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/4 "2017-04-04T17:32:37Z")

</div>

> [@sam](#):
>
> I think it is pretty straight forward to do in a plugin.

That would be neat. I’ll stay tuned!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 4, 2017, 5:34pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/5 "2017-04-04T17:34:29Z")

</div>

> [@\_vincent](#):
>
> That would be neat. I’ll stay tuned!

Just to clarify, Discourse team has no plans to implement anything like this, you will need to find someone in the community to build this.

---

<div class="post-metadata">

### Author: ![\_vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_vincent/32/119557_2.png) [@\_vincent](https://meta.discourse.org/u/_vincent)
#### Post date: [April 4, 2017, 5:54pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/6 "2017-04-04T17:54:34Z")

</div>

> [@sam](#):
>
> Just to clarify, Discourse team has no plans to implement anything like this, you will need to find someone in the community to build this.

Obviously 😉

And I’ll be happy to buy a couple of beers to anyone willing to get their hands dirty!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 6, 2017, 1:15pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/7 "2017-04-06T13:15:05Z")

</div>

I decided to have a go at making a plugin for this - is this the kind of thing you had in mind?

It works with any `<iframe>` or `<video>` (with some special treatment for lazyYT). It adds a button to every compatible thing, which then opens a little popup in the bottom right.

You can then “minimise” it, which keeps the audio going in the background, or completely close it.

[![](https://global.discourse-cdn.com/meta/original/4X/1/6/d/16ddeee3d1cc1bb942fb5377dbd3af2ae0f0adbd.jpeg "Discourse Media Overlay Demo") ](https://www.youtube.com/watch?v=s1Lck4CWfUk)

---

<div class="post-metadata">

### Author: ![\_vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_vincent/32/119557_2.png) [@\_vincent](https://meta.discourse.org/u/_vincent)
#### Post date: [April 6, 2017, 1:23pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/8 "2017-04-06T13:23:04Z")

</div>

Wow, that’s great.

Are you ready to release it?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 6, 2017, 1:25pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/9 "2017-04-06T13:25:06Z")

</div>

Almost, just wanted to check I had the right idea before polishing it off 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 6, 2017, 1:39pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/10 "2017-04-06T13:39:02Z")

</div>

The button is a bit oddly placed, I would overlay it somewhere on the video if possible, I wonder if youtube allows you to add a custom button to the embed.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [April 6, 2017, 1:42pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/11 "2017-04-06T13:42:01Z")

</div>

I agree it’s a bit odd, I struggled to find anywhere sensible to put it. I tried doing some `:hover` based stuff but then realised that would exclude any touch-based devices.

The button could be positioned on top of the video, but that would obscure the video if the user decides to play inline (there’s no way to check whether a video is paused/playing when it’s inside an iframe).

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [April 6, 2017, 2:35pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/12 "2017-04-06T14:35:51Z")

</div>

Discussion continues here:

[https://meta.discourse.org/t/media-overlay-plugin/60549?u=erlend\_sh](https://meta.discourse.org/t/media-overlay-plugin/60549)

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [April 6, 2017, 2:35pm UTC](https://meta.discourse.org/t/picture-in-picture-with-oneboxes/60423/13 "2017-04-06T14:35:55Z")

</div>


