# 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:** 2

<div class="post-metadata">

### Author: ![nicopace](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicopace/32/214950_2.png) [@nicopace](https://meta.discourse.org/u/nicopace)
#### Post date: [March 29, 2021, 2:34pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/22 "2021-03-29T14:34:41Z")

</div>

Thanks for the component.  
I am using the master branch of discourse github (commit [FIX: Allow dismissing Discard Drafts modal via ESC (#12532) · discourse/discourse@db7be94 · GitHub](https://github.com/discourse/discourse/commit/db7be947df29bb2ab27dd3abd80e3b470dcb74e5)).  
Just wanted to let you know that I’ve just enabled the component on the Default Theme.  
Once I’ve done that, it breaks the rendering of the site, as it loops the main container again and again infinitely… any suggestion?  
thanks!

---

<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: [March 30, 2021, 10:31pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/25 "2021-03-30T22:31:39Z")

</div>

Thanks for the report @nicopace. @pmusaraj just pushed some updates to the theme

[https://github.com/davidtaylorhq/discourse-media-overlay-theme/commit/b670c3125bf23859dd22ba68937a7b4d46f74eef](https://github.com/davidtaylorhq/discourse-media-overlay-theme/commit/b670c3125bf23859dd22ba68937a7b4d46f74eef)

Please can you try updating and let us know if things are working better?

---

<div class="post-metadata">

### Author: ![nicopace](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicopace/32/214950_2.png) [@nicopace](https://meta.discourse.org/u/nicopace)
#### Post date: [March 30, 2021, 10:58pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/26 "2021-03-30T22:58:42Z")

</div>

Thanks for the update. It works.  
I wonder if there is any plan to support delayed iframe renderings like the ones in [GitHub - discourse/discourse-bbb: Discourse integration with BigBlueButton. · GitHub](https://github.com/discourse/discourse-bbb) that appear after you click in a button.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 14, 2023, 11:32pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/27 "2023-08-14T23:32:17Z")

</div>

This (quite wonderful) Theme Component **does** seem to work, but it is tagged as “broken”.

I can’t make it **not** work.

Could others please test as well and provide results?

If it’s not broken, can we remove the “broken” tag?

---

<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: [August 15, 2023, 12:35pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/30 "2023-08-15T12:35:56Z")

</div>

Hi @denvergeeks. It looks like this was tagged as broken due to some issues with YouTube oneboxes. Can you confirm whether YouTube videos are working on ok your site with this theme component?

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 15, 2023, 2:02pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/32 "2023-08-15T14:02:12Z")

</div>

Thanks @david – You are correct it is throwing errors and choking on YouTube vids and iframes too, but I forked and removed the LazyYT in the .js and it does work after that…

[https://github.com/davidtaylorhq/discourse-media-overlay-theme/commit/6fbc1b46b806d0fb4d2e7bc538e1e2ba0ed5aef1](https://github.com/davidtaylorhq/discourse-media-overlay-theme/commit/6fbc1b46b806d0fb4d2e7bc538e1e2ba0ed5aef1)

---

<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: [August 15, 2023, 2:03pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/33 "2023-08-15T14:03:10Z")

</div>

Great! Would you mind making a PR with that change?

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 15, 2023, 2:17pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/34 "2023-08-15T14:17:08Z")

</div>

OK I think I did that PR right (enough).

---

<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: [August 15, 2023, 4:15pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/35 "2023-08-15T16:15:18Z")

</div>

Looks great, thanks for that. I’ve now removed #broken from this topic 🚀

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 15, 2023, 4:32pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/36 "2023-08-15T16:32:32Z")

</div>

ok this is awesome! thanks for fixing @denvergeeks and @david 🙂

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 17, 2023, 2:11pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/37 "2023-08-17T14:11:59Z")

</div>

Not every user will embed the iframe code, everyone will directly embed the video URL. Maybe it’s worth implementing a tool to convert the YouTube video URL into an iframe embed code

> <https://stackoverflow.com/questions/7168987/how-to-convert-a-youtube-video-url-to-the-iframe-embed-code-using-jquery-on-pag>

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 17, 2023, 2:20pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/38 "2023-08-17T14:20:44Z")

</div>

i’m quite certain a theme component can be made for this and putting a button on the composer tool bar. or this one could be forked with that part added.

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 17, 2023, 2:35pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/39 "2023-08-17T14:35:40Z")

</div>

An additional button will complicate the interface. It is necessary that the conversion of URL addresses is carried out automatically, imperceptibly for the user. Then all embedded videos, regardless of the embed method, will work correctly

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 17, 2023, 2:41pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/40 "2023-08-17T14:41:58Z")

</div>

well ok. then one could fork it and make it automatic i suppose. 🤷🏻‍♀️

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 17, 2023, 4:01pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/41 "2023-08-17T16:01:19Z")

</div>

Maybe it should be in the core so that all URLs are parsed to the same standard?

---

<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: [August 18, 2023, 7:40am UTC](https://meta.discourse.org/t/media-overlay-component/81418/42 "2023-08-18T07:40:58Z")

</div>

I’m not sure I understand the request here… Discourse already expands YouTube links into iframes as part of our “onebox” system. Just paste the URL on a line by itself:

[![](https://global.discourse-cdn.com/meta/original/4X/9/7/9/97968bc688bedc51e91bd8c712809c8a916fe28c.jpeg "Discourse Forum Beginner Introduction 2024 - What Is Discourse?") ](https://www.youtube.com/watch?v=z3qp_uB46FA)

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 18, 2023, 8:03am UTC](https://meta.discourse.org/t/media-overlay-component/81418/43 "2023-08-18T08:03:39Z")

</div>

Yes, but pasting the URL directly does not work with this component. The component does not see the iframe onebox. You need to paste the iframe code directly for the component to work. And what no one does, everyone puts only the URL, not the iframe code

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 18, 2023, 8:13am UTC](https://meta.discourse.org/t/media-overlay-component/81418/44 "2023-08-18T08:13:12Z")

</div>

Yes, the ideal would be for users to just paste whatever is provided by the source and it automagically works in Discourse!

Seems pretty basic to nOObs!

---

<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: [August 18, 2023, 9:50am UTC](https://meta.discourse.org/t/media-overlay-component/81418/45 "2023-08-18T09:50:42Z")

</div>

Ah I see, that makes sense 👍

Definitely #pr-welcome if anyone would like to try and get this theme component working with core’s new ‘lazy-videos’ implementation

---

<div class="post-metadata">

### Author: ![lubezniy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lubezniy/32/137694_2.png) [@lubezniy](https://meta.discourse.org/u/lubezniy)
#### Post date: [January 11, 2024, 8:55pm UTC](https://meta.discourse.org/t/media-overlay-component/81418/46 "2024-01-11T20:55:12Z")

</div>

Thanks again. Media Overlay theme component from [GitHub - davidtaylorhq/discourse-media-overlay-theme · GitHub](https://github.com/davidtaylorhq/discourse-media-overlay-theme.git) was a reason. When i turned it off, Discourse started working correctly.

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

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