Podcasts von BuzzSprout einbetten

Unterstützung
1

Ich versuche, Code von einem beliebten Podcast-Player einzubetten, aber keine Änderung meiner Einstellungen bringt den Player zur Anzeige. Der Code ist sehr einfach. Iframes waren einfach. Bei diesem scheine ich den Fehler nicht finden zu können.

2

Kannst du den relevanten Code (ohne private Daten) posten?

1 „Gefällt mir“
3

FireShot Capture 157 - Buzzsprout - www.buzzsprout.com
FireShot Capture 157 - Buzzsprout - www.buzzsprout.com378×208 11.8 KB

4

OK, was CSP betrifft, solltest du einfach https://www.buzzsprout.com zu deiner CSP hinzufügen, wie hier gezeigt:

image
image1354×304 34.7 KB

Aber stelle sicher, dass dieses Embed auch an der richtigen Stelle in deinem Theme platziert wird.

2 „Gefällt mir“
5

OK, ich habe die URL hinzugefügt, aber sie wird immer noch nicht angezeigt. Ich bin mir nicht sicher, wie ich das Theme anpassen soll. Ich habe einfach den Code oben bei den Beiträgen eingefügt, die mit Podcasts in der Community zu tun hatten.

6

Ah, du kannst in einem normalen Beitrag kein <script>-Tag verwenden. Wenn wir das zuließen, könnten Benutzer deine Seite leicht durcheinanderbringen. Hast du versucht, die URL des Podcasts einfach in einer eigenen Zeile zu posten? Wir haben eine Funktion namens Oneboxing, die in deinem Fall funktionieren könnte, ohne aufwändige Einbettungen.

2 „Gefällt mir“
7

OK, ich werde das nachschlagen.

1 „Gefällt mir“
8

Hallo Penar,

ich habe es gerade ausprobiert, und es wird nicht in einem Onebox-Format angezeigt:

https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3

Da die Verwendung ihres Script-Tags nicht möglich ist, habe ich noch andere Optionen?

9

Ist das Skript etwas, das einmal im Site-Theme eingebettet werden kann, oder muss es neben dem Iframe liegen?

Edit: Ich habe meine eigene Frage beantwortet – es ist iframe-spezifisch. Das ist wirklich nicht sehr hilfreich von ihnen.

10

Das ist eine direkte MP3-Datei. In diesem Fall können Sie das HTML-Audio-Tag verwenden:

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
5 „Gefällt mir“
11

@pmusaraj Das ist super nützlich. Danke!

Hallo @Stephen,

was meinst du genau mit „iframe-spezifisch"? Das ist das, was sie bereitstellen:

<div id='buzzsprout-small-player-1306987'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small'></script>

Eigentlich, @Aaron_Norris, habe ich gerade bemerkt, dass ich diesem JavaScript-Skript folgen und die Dekodierung einfach selbst vornehmen kann:

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&amp;iframe=true&amp;referrer=https%253A%252F%252Fwww.buzzsprout.com%252F1306987.js%253Fcontainer_id%253Dbuzzsprout-small-player-1306987%2526player%253Dsmall%22%20width=%22100%25%22%20height=%22200%22%20frameborder=%220%22%20scrolling=%22no%22%3E%3C/iframe%3E%0A%0A%0A")); 
// gibt diesen iframe zurück
<iframe src="https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&amp;iframe=true&amp;referrer=https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>

Ich kann Buzzsprout in allowed iframes auf die Whitelist setzen, und es funktioniert einwandfrei:

image
image1063×332 44.3 KB

2 „Gefällt mir“
12

Kannst du das so erklären, dass es auch Leute wie ich verstehen? Ich möchte, dass dies in unserem Forum abspielbar ist (beachte, dass es keine .mp3-Datei wie oben ist):

https://www.buzzsprout.com/1717287/8537076

13

Hallo Nathan,

Hier sind die Schritte:

  1. Gehe zur Admin-Konsole und suche nach „allowed iframes“.

  2. Füge https://www.buzzsprout.com hinzu und klicke auf das Häkchen, um die Änderung zu speichern.

  3. Füge dies zu deinem Beitrag hinzu:

    <div data-theme-iframe="no-scroll">
<iframe src="https://www.buzzsprout.com/1717287/8537076?client_source=small_player&amp;iframe=true&amp;referrer=https://lacomunidad.deliberatespanish.com?player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
</div>

Das umgebende <div> ist optional, aber ich verwende es, weil ich keine Scrollbalken in meinen Iframes möchte. Wenn du dies aktivieren möchtest, musst du noch zwei weitere Schritte durchführen:

  1. Gehe zu deinem aktiven Theme, klicke auf „CSS/HTML bearbeiten“ und wähle den Tab </head> aus.
  2. Füge dies ein und speichere:
    <script type="text/discourse-plugin" version="0.8.42">
  api.decorateCookedElement(post =>
    post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
      iframe.setAttribute('scrolling', 'no');
    }),
    { 
      id: 'iframe-decorator',
      onlyStream: true,
    }
  );
</script>
4 „Gefällt mir“
14

Brillant! Das Entfernen des Scrollens verbessert es wirklich.

Danke für die klare Anleitung – super hilfreich!!

1 „Gefällt mir“