继 https://meta.discourse.org/t/media-overlay-plugin/60549… 之后
此主题组件允许用户在浏览网站时将媒体“弹出”到浮动窗口中。即使他们导航到不同的主题，媒体也会继续播放。
它适用于任何 <iframe> 或 <video>（对 lazyYT 有一些特殊处理）。它为每个兼容的元素添加一个按钮，点击后会在右下角打开一个小弹窗。
然后您可以将其“最小化”，这样音频会在后台继续播放，或者完全关闭它。
目前视频的大小由原始嵌入决定。我想添加一个“调整大小”功能，可以是“点击并拖动”，或者简单地提供三个按钮：“小”、“中”、“大”。
目前这会遮挡编辑器……简单的解决方案是，如果您想发布帖子，只需关闭弹窗即可：wink:。
主题 URL 为：
https://github.com/davidtaylorhq/discourse-media-overlay-theme
要安装，请按照以下说明操作：
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:
You may want to add some further customisation to make it match your forum’s style 
Thanks a lot! Works like a charm.
Just noticed this little 
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
It just freezes to the default play button and video thumbnail
Anyone else have this issue?
Can you clarify - is this a them or a theme component?
It is a theme component
OK works now -thank you
It might be better if we can scale the screen and move it to anywhere with mouse.
Is the overlay component supposed to work with pasted links to .mp4 files? Like in Should audio and video tags be allowed? ?
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 
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.
is this supposed to work with embedded youtube vids?
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 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:
and collapsed:
另外，当我改变视频位置时，视频不会恢复播放。
如果你指的是 YouTube 视频，请查看我上方的帖子并使用 iframe 代码，这样就不会出现这个问题了。
我可以在您的网站上试用吗？
好的，这是一篇嵌入了 YouTube iframe 的帖子
https://unstuckpolitics.com/t/new-topic-do-not-read/242/53
媒体叠加层组件导致来自 imgur 等网站的视频无法在我们的论坛中显示。我们通过删除第 103 行中的 video 修复了该问题，即将 $('iframe, video, .lazyYT', $elem) 更改为 $('iframe, .lazyYT', $elem)。
function addOverlays($elem) {
$('iframe, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")
现在，imgur 视频已恢复正常运行，叠加层功能在 iframe 和 lazyYT 上依然有效。
对于关注此功能的用户，iOS 上的 Safari 和 Firefox 已原生支持，而 Chrome 计划在其后续版本中实现该功能。
他们不是计划在 Google Chrome 82 中发布吗？另外，它是否已在任何 Google Chrome 内部测试渠道中可用？