YouTube 与 Vimeo 视频嵌入宽度

嵌入任何视频,我们只需在创建主题时粘贴视频链接。
但是,为什么当我嵌入 YouTube 视频时(见下文),它会从头到尾拉伸?而当我嵌入 Vimeo 视频时,它不会从头到尾拉伸?

有什么方法可以修复这个问题吗?
我没有看到任何区别,即使我在 VIMEO 嵌入代码中分配了视频大小。视频仍然显示与粘贴视频链接相同。
在这两种情况下,我所做的就是粘贴视频 URL。

YouTube

Vimeo
https://vimeo.com/300660748

看起来我无法在此处嵌入视频。所以这里有一些来自我的社区的截图。Vimeo 视频的宽度比 YouTube 视频的宽度短。有没有办法让 Vimeo 视频也扩展到允许的最大宽度?

4 个赞

我有一个关于全宽 Vimeo oneboxes 的 PR

6 个赞

测试

YT

Vimeo

5 个赞

你好 Falco,
我是 discourse 新手,不知道你提到的“PR”(“我有一个关于全宽 vimeo 单框的 PR”)是什么意思。

虽然你已经向我展示了一个现在可以工作的测试,但我需要做什么才能让它正常工作?因为我的社区中的 Vimeo 视频仍然无法扩展到全宽。

我仍在试图理解你刚才在上面的帖子中所做的事情。如果你能告诉我需要做什么才能在我的社区中修复这个问题,我将不胜感激。谢谢。

1 个赞

你好 Amber,

PR 是“pull request”(拉取请求)的缩写,它指的是 GitHub。本质上,这意味着 Falco 对 Discourse 代码进行了更改,并希望在将更改合并到 Discourse 之前对其进行审查。

这个特定的 Discourse 站点 meta.discourse.org 会自动更新我们工程师的每一项更改。你的站点不会自动部署——我们会定期但频率较低地为客户部署。我已经为你启动了一个站点的部署(更新)。部署将在大约 30 分钟内完成。

部署完成后,你需要重建帖子。为此,请点击帖子下方的“显示更多”按钮,然后点击管理员扳手。最后,点击“重建 HTML”。



4 个赞

法尔科,
非常感谢。

乔舒亚,非常感谢您澄清一切。很感激。

3 个赞

你好 @Falco

这个更改是否也适用于私有 Vimeo 嵌入?(即带有 ?h=<some identifier> 的播放器链接)

如果它们以前可以工作,那么在查看提交中的代码更改后,它们应该可以使用此更改正常工作。:slight_smile:

2 个赞

它们在嵌入式大小上遇到一个奇怪的问题。即使在此次提交后,私有视频的大小仍然很小。我希望也有办法让它们也全屏显示?

1 个赞

我没有 Vimeo 账户来创建那些私人视频,所以 :person_shrugging:

1 个赞

我也遇到了同样的问题。我正在运行 Discourse 2.9.0.beta9 (56832adf17)。

这在小屏幕上尤其成问题(调整此屏幕大小,您可以看到第二个——OneBoxed 的那个——变得多么小)。


这是包含 URL 中播放器的链接……(这个在小屏幕上不会缩小,但我似乎也无法将其居中。)

https://player.vimeo.com/video/743344591


下面的那个是 OneBoxed……(这个在小屏幕尺寸上会缩小并变得太小。)

https://vimeo.com/743344591

那么这样就没问题了吗?merge怎么可能不会影响到我们的实例呢?

我可能遗漏了什么 :slight_smile:

那是如何发布的?你能分享原始帖子吗?

1 个赞

我正在进行一些测试,因为我们开始在 Discourse 社区中分享 Vimeo 的一些视频。这是原始内容:

测试

https://vimeo.com/channels/staffpicks/353070045

VS

https://vimeo.com/353070045

我们不识别您使用的网址格式,因此它将使用通用的 onebox 代码,而不是特殊的 Vimeo 代码。

2 个赞

我使用了杰夫几年前分享的一个链接。所以谢谢你,因为现在它更好!

*(但是)为什么不是全屏?*它仍然是固定的 :cry:

因为这是 4:3 比例的视频。

2 个赞

为什么不将相同的逻辑应用于任何明确指定了高度和宽度并最终通过 iframe 嵌入的 OneBox 源?


想法和方法
理论上,如果我们已经有了显式的高度/宽度并且它被指定在 iframe 上,那么可以使用相同的通用方法来设置纵横比,从而使一切都可以通用缩放。

例如,我在社区中嵌入了越来越多的视频演示,所以我切换到了 Bunny.net,它以其 CDN 而闻名,以及他们的 Bunny Stream 服务来上传和嵌入视频。

在将 video.bunnycdn.comiframe.mediadelivery.net 添加到我的允许 iframe 设置后,我可以轻松地从 Bunny Stream 粘贴 URL,它会使用其中一个通用回退进行 OneBox… 但是在移动设备上查看时,纵横比会变得非常奇怪。:confused:

作为一种快速的解决方法,我编写了一个简单的 Theme Component,它使用 Plugin API 和 decorateCookedElement 来更新带有纵横比信息的 iframe。

对此有什么最新消息吗?

Bunny.net 因其服务的质量和速度而越来越受欢迎。

我们现在可以在 Discourse 上嵌入 bunny.net 流媒体视频了吗?