# Media Overlay component

**URL:** https://meta.discourse.org/t/media-overlay-component/81418
**Category:** Theme component
**Created:** [February 24, 2018, 5:17pm UTC](https://meta.discourse.org/t/media-overlay-component/81418 "2018-02-24T17:17:21Z")
**Posts on this page:** 20
**Page:** 1

<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: [February 24, 2018, 5:17pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/1 "2018-02-24T17:17:21Z")

</div>

Continuing from [https://meta.discourse.org/t/media-overlay-plugin/60549](https://meta.discourse.org/t/media-overlay-plugin/60549)…

# [Discourse Media Overlay Theme](https://github.com/davidtaylorhq/discourse-media-overlay-theme)

This theme component allows users to “pop out” media into a floating window while they browse the site. They can even navigate to a different topic and the media will continue working.

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/3X/8/3/83b42b39445e04ed97987f87bb313fb5495507ac.gif)

At the moment the size of the video is decided by the original embed. I’d like to add a “resizing” feature, either a “click and drag”, or just simply 3 buttons “small”, “medium”, “large”.

Currently this obscures the composer… simple solution is to just close the popup if you want to write a post 😉.

# Installation

The theme URL is

```plaintext
https://github.com/davidtaylorhq/discourse-media-overlay-theme

```

To install, follow these instructions:

> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682?source_topic_id=76662):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

---

<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: [February 24, 2018, 5:21pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/2 "2018-02-24T17:21:57Z")

</div>

> [@\_vincent](#):
>
> Is there any way to make the media overlay button compatible with this YouTube player CSS hack?
> 
> [Discourse Vincent theme - #89](https://meta.discourse.org/t/discourse-vincent-theme/76662/89)

I have fixed this with the addition of an explicit z-index, and some explicit colours. With the vincent theme it now looks like this when you mouse-over:

 ![31](https://global.discourse-cdn.com/meta/original/3X/7/4/74575ee68fdbbd7a453b0be8bbf184fd776dcf34.jpg)

You may want to add some further customisation to make it match your forum’s style 🙂

---

<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: [February 24, 2018, 6:06pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/3 "2018-02-24T18:06:41Z")

</div>

Thanks a lot! Works like a charm.

---

<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: [March 21, 2018, 3:18pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/4 "2018-03-21T15:18:26Z")

</div>

Just noticed this little 🐛

 ![Sans%20titre](https://global.discourse-cdn.com/meta/original/3X/c/8/c86ec5db5ced8e07afd9138c29b9d39531c3c383.png)

---

<div class="post-metadata">

### Author: ![subtenko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/subtenko/32/119524_2.png) [@subtenko](https://meta.discourse.org/u/subtenko)
#### Post date: [March 21, 2018, 5:31pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/5 "2018-03-21T17:31:57Z")

</div>

This is great! However Im not sure if its just be but while the video is playing if you:

1.change positions or minimmize and remaximize

2.pause and attempt to unpause

1. play or pause in post, and to the opposite in the media overlay

It just freezes to the default play button and video thumbnail

Anyone else have this issue?

---

<div class="post-metadata">

### Author: ![rkaplan](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@rkaplan](https://meta.discourse.org/u/rkaplan)
#### Post date: [January 31, 2019, 2:21pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/6 "2019-01-31T14:21:18Z")

</div>

Can you clarify - is this a them or a theme component?

---

<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: [January 31, 2019, 2:26pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/7 "2019-01-31T14:26:02Z")

</div>

It is a theme component

---

<div class="post-metadata">

### Author: ![rkaplan](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@rkaplan](https://meta.discourse.org/u/rkaplan)
#### Post date: [January 31, 2019, 2:51pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/8 "2019-01-31T14:51:23Z")

</div>

OK works now -thank you

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [February 1, 2019, 1:45am UTC](https://meta.discourse.org/t/media-overlay-component/81418/9 "2019-02-01T01:45:49Z")

</div>

It might be better if we can scale the screen and move it to anywhere with mouse.

---

<div class="post-metadata">

### Author: ![ssvenn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ssvenn/32/86740_2.png) [@ssvenn](https://meta.discourse.org/u/ssvenn)
#### Post date: [October 23, 2019, 1:37pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/10 "2019-10-23T13:37:15Z")

</div>

Is the overlay component supposed to work with pasted links to .mp4 files? Like in [Should audio and video tags be allowed? - #7 by codinghorror](https://meta.discourse.org/t/should-audio-and-video-tags-be-allowed/12709/7) ?

I tried enabling it on my forum and it makes the video box disappear completely when the video is oneboxed from a mp4 link.  
I’ve also tested it with iframes and that makes it works as expected, but iframes are trickier to format properly 🙂

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [November 15, 2019, 11:22pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/11 "2019-11-15T23:22:28Z")

</div>

We just installed this so users could watch impeachment hearings without having to have another window open and it was such a hit (one comment was “This is very convenient. Amazing. This is by far the best forum interface I’ve ever experienced.”) that people on phones and tablets wanted it too. And since you can’t have multiple windows open on your mobile device, it’s a great feature to have.

To enable it on tablets and phones, just remove `no-touch` from lines 64 and 82 of Common CSS, and then resize the player on smaller screens with something like:

```
@media (max-width: 1024px) {
    #media-overlay,
    #media-overlay iframe{
        width: 400px;
        max-height: 225px;
    }
}
@media (max-width: 768px) {
    #media-overlay,
    #media-overlay iframe{
        width: 320px;
        max-height: 180px;
    }
    #media-overlay {
        &.dock-right {
            right: 10px;
        }
        &.dock-left {
            left: 10px;
        }
    }
}
@media (max-width: 480px) {
    #media-overlay,
    #media-overlay iframe {
        width: 240px;
        max-height: 135px;
    }
    #media-overlay {
        &.dock-right {
            right: 0px;
        }
        &.dock-left {
            left: 0px;
        }
    }
}

```

On touch devices, long-press = hover to bring up the control icon or the media controls, and then tap somewhere else to hide it again.

I was going to leave it off phones, but it’s still useful on a phone because you can listen to the audio with the player collapsed.

I assume this is a known limitation, but YouTubes won’t play audio when collapsed, and if you start to play a YouTube from the post and then decide to pop it out, there is no way to play the video in the floating window. You have to pop it out first without playing it, and then you can play it in the floating window.

---

<div class="post-metadata">

### Author: ![orchardstreet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/orchardstreet/32/149531_2.png) [@orchardstreet](https://meta.discourse.org/u/orchardstreet)
#### Post date: [November 15, 2019, 11:40pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/12 "2019-11-15T23:40:41Z")

</div>

is this supposed to work with embedded youtube vids?

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [November 16, 2019, 6:38pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/14 "2019-11-16T18:38:21Z")

</div>

It seems to work correctly with YouTube videos if you post them as an iFrame instead of just posting the link and using the Discourse lazyYT.

In order to for this to work, you must enable YouTube iFrames on your site. To do this go to Settings → “allowed iframes” and whitelist `https://www.youtube.com/`

Then when you paste an iFrame code (you can find the iFrame code for any video on Youtube under Share → Embed) the YouTube embedded via iFrame will be fully functional with the Media Overlay component. I.e. you need to post:

`<iframe width="560" height="315" src="https://www.youtube.com/embed/Ft1waA3p2_w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`

instead of` https://www.youtube.com/watch?v=Ft1waA3p2_w`

The iframe code won’t work on [discourse.org](http://discourse.org) because they haven’t whitelisted `https://www.youtube.com` in their “allowed iframes” settings, but it’s easy to add to your own forum.

Here’s how it looks on our forum on my phone with the media player expanded:

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/3/23658fc38dc3f3506290c3c7dbbeec614a482489.png)

and collapsed:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/4/1417b45648be1421aa727ba8269e13177c09a5ef.png)

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [December 28, 2019, 4:47pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/15 "2019-12-28T16:47:55Z")

</div>

> [@Anatolia](#):
>
> It might be better if we can scale the screen and move it to anywhere with mouse.

Also videos don’t resume playing when I change its position.

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [December 28, 2019, 9:35pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/16 "2019-12-28T21:35:36Z")

</div>

If you’re talking about youtube videos, see my post above yours and use the iframe code and you won’t have this issue

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [December 28, 2019, 11:19pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/17 "2019-12-28T23:19:49Z")

</div>

Can I try it on your site?

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [December 28, 2019, 11:55pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/18 "2019-12-28T23:55:31Z")

</div>

Sure, here’s a post with an iframe embeded YT  
[https://unstuckpolitics.com/t/new-topic-do-not-read/242/53](https://unstuckpolitics.com/t/new-topic-do-not-read/242/53)

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 4, 2020, 11:20pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/19 "2020-03-04T23:20:45Z")

</div>

The Media Overlay component was preventing videos from sites like imgur from displaying on our forum. We fixed the issue by removing `video` from line 103, i.e. changing ` $('iframe, video, .lazyYT', $elem)` to ` $('iframe, .lazyYT', $elem)`

```plaintext
    function addOverlays($elem) {
      $('iframe, video, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")

```

Now we have imgur videos working again, and the overlay still works with iFrames and lazyYTs

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 5, 2020, 12:14am UTC](https://meta.discourse.org/t/media-overlay-component/81418/20 "2020-03-05T00:14:38Z")

</div>

For people interested in this feature iOS Safari and Firefox are doing this out of the box, with Chrome planning it for their next versions.

---

<div class="post-metadata">

### Author: ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [March 5, 2020, 2:24am UTC](https://meta.discourse.org/t/media-overlay-component/81418/21 "2020-03-05T02:24:20Z")

</div>

> [@Falco](#):
>
> Chrome planning it for their next versions.

Aren’t they planning to release it in Google Chrome 82? Also, is it available in any of the Google Chrome insider channels?

[Next page](https://meta.discourse.org/t/media-overlay-component/81418.md?page=2)