# 嵌入Bunny Stream视频不起作用

**URL:** https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838
**Category:** Support
**Created:** [2023年四月25日 15:52 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838 "2023-04-25T15:52:18Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![alexmas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexmas/32/299672_2.png) [@alexmas](https://meta.discourse.org/u/alexmas)
#### Post date: [2023年四月25日 15:52 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/1 "2023-04-25T15:52:18Z")

</div>

你好

我正在尝试在我的论坛上嵌入 [bunny.net](http://bunny.net) Stream 视频，但它不起作用。

直接链接只显示图片预览：

> **[404 Video Not Found](https://iframe.mediadelivery.net/play/3639/01bea422-9687-4058-9fcc-2b21dee6df2a)**

使用 iframe 的嵌入代码什么都不显示：

⬇

⬆

代码：

```html
<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

```

---

<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: [2023年四月25日 15:58 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/2 "2023-04-25T15:58:45Z")

</div>

您是否在发布前将 `https://iframe.mediadelivery.net/embed/` 添加到了 `允许的 iframe` 网站设置中？

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年四月25日 15:59 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/3 "2023-04-25T15:59:32Z")

</div>

我认为 Discourse 目前不支持将其作为 Onebox。\n\n但是，iframe 可以工作（虽然很小）；：\n\n

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/5/4/e54a59e42fdb9130d622ad79909caff2725ce9aa.jpeg)\n\n请记住在 `allowed iframes` 设置中添加 `https://iframe.mediadelivery.net/embed/` 🙂\n\n—\n\n该死的，就晚了1秒 😄

---

<div class="post-metadata">

### Author: ![alexmas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexmas/32/299672_2.png) [@alexmas](https://meta.discourse.org/u/alexmas)
#### Post date: [2023年四月25日 16:21 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/4 "2023-04-25T16:21:26Z")

</div>

谢谢 Falco 和 Coin-coin！

我将把这个帖子标记为已解决，但还有一个问题。

**Bunny 建议的“非响应式”代码：**

```html
<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

```

但尺寸不对：

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/6/8/b684554408a188fb6ee849f8b44dc405d42a2ee8.jpeg)

**以及这个“响应式”代码：**

```html
<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

```

而且尺寸太小了

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/c/3/5c3bb5fea6b03564c7a60b44654acb5ff2252e9c.jpeg)

有什么建议吗？

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年四月25日 22:21 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/5 "2023-04-25T22:21:43Z")

</div>

我不确定在这里使用 iframe 能否正确调整视频的大小。

`<iframe>` 标签中的样式属性会被剥离，因此在此处设置尺寸不会有任何效果，除非你在自己的主题中添加 CSS。但这也不会产生什么神奇的效果。

如果你将 iframe 的宽度设置为帖子容器的 100%，它将会这样显示：

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/d/6/0d64a17fef03956a5c1099770a5bc287382e6f1f.jpeg)

而且你无法设置一个依赖于视频比例的自动高度。

我认为除了使用小尺寸视频之外没有其他直接的解决方案（不要包含 `<div style="position: relative; padding-top: 56.25%;">` 部分，因为你在发帖时它 anyway 会被移除），而那些希望以更大格式观看视频的人可以点击视频右下角的全屏图标。

你也可以在 #Contribute > Feature 板块发帖，询问是否可以为一键预览（onebox）功能添加对 Bunny Stream 视频的支持。但除非有强烈的需求（我对此表示怀疑），否则这很可能属于 #pr-welcome 标签，这意味着团队不会自行添加该功能，但任何具备一定编程知识的人都欢迎为此编写代码，以便最终将其添加到 Discourse 中。

---

<div class="post-metadata">

### Author: ![alexmas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexmas/32/299672_2.png) [@alexmas](https://meta.discourse.org/u/alexmas)
#### Post date: [2023年四月27日 00:09 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/6 "2023-04-27T00:09:14Z")

</div>

谢谢 Coin-coin

我终于要使用 Bunny iframe 代码中的那个设置了：

- 不选择响应式代码  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/1/2/e127ac5f7c2cd206f75fae7c0ba0b1cb9a23af38.png)

- 在默认的以下代码中，将 size 替换为 width=“99%” height=“300”

```plaintext
<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

```

高度在桌面端会有点太小，在智能手机上会有点太高，但宽度会是合适的。

如果能支持 Onebox 就太好了，但据我所见，目前 discourse 上只有 YouTube、Vimeo 和 TikTok。

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2023年五月27日 00:09 UTC](https://meta.discourse.org/t/embed-bunny-stream-videos-doesnt-work/262838/7 "2023-05-27T00:09:42Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.