Bunny Stream Videos einbetten funktioniert nicht

Hallo

Ich versuche, Bunny.net Stream-Videos in meinem Forum einzubetten, aber es funktioniert nicht.

Der direkte Link zeigt nur eine Bildvorschau:

und der Einbettungscode mit iframe zeigt nichts:

:arrow_down:

:arrow_up:

Code:

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

Haben Sie https://iframe.mediadelivery.net/embed/ zu den allowed iframes in den Website-Einstellungen hinzugefügt, bevor Sie gepostet haben?

Ich glaube, das wird von Discourse als Onebox noch nicht unterstützt.

Das iframe funktioniert jedoch (wenn auch klein);:

Denken Sie daran, https://iframe.mediadelivery.net/embed/ zu Ihrer Einstellung allowed iframes hinzuzufügen :slight_smile:


Verdammt, buchstäblich 1 Sekunde zu spät :smile:

Danke Falco und Coin-coin!

Ich werde diesen Beitrag als gelöst markieren, aber eine letzte Frage.

Bunny schlägt diesen Code für „nicht responsiv“ vor:

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

Aber die Größe ist nicht die richtige:

Und dieser Code für „responsiv“:

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

Und die Größe ist zu klein

Irgendwelche Vorschläge?

Ich bin mir nicht sicher, ob ein iframe hier das Video richtig skalieren kann.

Stilattribute werden aus dem <iframe>-Tag entfernt, daher hat das Festlegen von Größen hier keine Auswirkung, es sei denn, du fügst das CSS in deinem eigenen Theme hinzu. Aber es wird auch keine Wunder wirken.

Wenn du die iframe-Breite auf 100 % des Beitragscontainers festlegst, wird es so dargestellt:

Und du kannst keine automatische Höhe festlegen, die vom Seitenverhältnis des Videos abhängt.

Ich denke, es gibt keine einfache Lösung außer die Verwendung des kleinen Videos (füge den <div style="position: relative; padding-top: 56.25%;">-Teil nicht hinzu, da er beim Posten sowieso entfernt wird), und diejenigen, die das Video in größerem Format sehen möchten, klicken auf das Vollbild-Symbol unten rechts im Video.

Du kannst auch auf Contribute > Feature posten, um zu fragen, ob eine Onebox-Unterstützung für Bunny Stream-Videos erstellt werden könnte, aber es sei denn, es gibt eine hohe Nachfrage (was ich bezweifle), wird es wahrscheinlich unter das Tag pr-welcome fallen, was bedeutet, dass das Team die Funktion nicht selbst hinzufügen wird, aber jeder mit etwas Programmierkenntnissen ist willkommen, diese Funktion zu programmieren, damit sie schließlich in Discourse integriert werden kann.

Danke Coin-coin

Endlich werde ich diese Einstellung im Bunny iframe-Code verwenden:

  • Nicht für responsiven Code auswählen
    image

  • Im folgenden Standardcode die Größe durch width=“99%” height=“300” ersetzen

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

Die Höhe wird auf dem Desktop etwas zu klein und auf dem Smartphone etwas zu hoch sein, aber die Breite wird in Ordnung sein.

Onebox wäre großartig, aber soweit ich sehen kann, haben wir bei Discourse derzeit nur YouTube, Vimeo und TikTok.