Вставка видео Bunny Stream не работает

Поддержка
1

Привет!

Я пытаюсь встроить видео с bunny.net Stream на свой форум, но это не работает.

Прямая ссылка показывает только превью изображения:

А код для вставки с iframe ничего не отображает:

:arrow_down:

:arrow_up:

код:

<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>
2

Добавили ли вы https://iframe.mediadelivery.net/embed/ в настройку сайта «Разрешенные iframe» перед публикацией?

3

По-моему, это пока просто не поддерживается в Discourse как Onebox.

Однако iframe работает (хоть и в маленьком размере) :

image
image773×353 44.4 KB

Не забудьте добавить https://iframe.mediadelivery.net/embed/ в настройку разрешенные iframe :slight_smile:

Черт, буквально на секунду опоздал :smile:

4

Спасибо, Falco и Coin-coin!

Я помечу этот пост как «Решено», но остался последний вопрос.

Bunny предлагает этот код для «нерезиновой» вставки:

<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
image473×526 126 KB

А этот код для «резиновой» вставки:

<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
image768×258 42.3 KB

Есть какие-то предложения?

5

Не уверен, что iframe здесь сможет корректно изменить размер видео.

Стилистические атрибуты удаляются из тега <iframe>, поэтому установка размеров здесь не даст никакого эффекта, если только вы не добавите CSS в свою тему. Но это не сотворит чудес.

Если вы установите ширину iframe на 100% от контейнера поста, он будет отображаться так:

image
image780×334 74.6 KB

И вы не сможете установить автоматическую высоту, которая зависела бы от соотношения сторон видео.

Думаю, простого решения нет, кроме использования небольшого видео (не добавляйте часть <div style="position: relative; padding-top: 56.25%;">, так как она всё равно будет удалена при публикации), а те, кто хочет увидеть видео в большем формате, нажмут на значок полноэкранного режима в правом нижнем углу видео.

Вы также можете написать в #feature и спросить, можно ли добавить поддержку onebox для видео с Bunny Stream, но если нет высокого спроса (что я сомневаюсь), это, скорее всего, будет помечено тегом pr-welcome. Это означает, что команда сама не добавит эту функцию, но любой, кто немного разбирается в программировании, может написать код для этой функции, чтобы она в итоге была добавлена в Discourse.

6

Спасибо, Coin-coin!

Наконец-то я применю эту настройку к коду iframe от Bunny:

  • не выбирать опцию для адаптивного кода
    image

  • В коде по умолчанию замените size на width=“99%” height=“300”

<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.