Intégrer des podcasts de BuzzSprout

Soutien
1

J’essaie d’intégrer du code provenant d’un lecteur de podcast populaire, mais aucun paramètre que je modifie ne permet d’afficher le lecteur. Le code est très simple. Les iframes étaient faciles. Celui-ci, je n’arrive pas à le faire fonctionner.

2

Peux-tu poster le code pertinent (sans les données privées) ?

1 « J'aime »
3

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

4

D’accord, en ce qui concerne la CSP, vous devez simplement ajouter https://www.buzzsprout.com à votre CSP, comme ceci :

image
image1354×304 34.7 KB

Mais assurez-vous que cet embed est également placé au bon endroit dans votre thème.

2 « J'aime »
5

D’accord, j’ai bien ajouté l’URL, mais elle ne s’affiche toujours pas. Je ne sais pas comment ajuster le thème. J’avais simplement collé le code en haut des publications concernant les podcasts dans la communauté.

6

Ah, vous ne pouvez pas publier de balise <script> dans un message normal. Si nous le permettions, les utilisateurs pourraient facilement mettre votre site en désordre. Avez-vous essayé de publier simplement l’URL du podcast sur sa propre ligne ? Nous disposons d’une fonctionnalité appelée « oneboxing » qui pourrait fonctionner dans votre cas, sans aucun embed complexe.

2 « J'aime »
7

D’accord, je vais vérifier cela.

1 « J'aime »
8

Salut Penar,

Je viens d’essayer cela et cela ne génère pas de onebox :

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

Puisque l’utilisation de leur balise script n’est plus possible, ai-je d’autres options ?

9

Le script est-il quelque chose que l’on peut intégrer une seule fois dans le thème du site, ou doit-il être placé à côté de l’iframe ?

edit : j’ai répondu à ma propre question, c’est spécifique à l’iframe, ce qui n’est vraiment pas très utile de leur part.

10

Il s’agit d’un fichier MP3 direct. Dans ce cas, vous pouvez utiliser la balise audio HTML :

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
5 « J'aime »
11

@pmusaraj C’est super utile. Merci !

Bonjour @Stephen,

Que voulez-vous dire par « spécifique aux iframes » ? Voici ce qu’ils fournissent :

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

En fait, @Aaron_Norris, je viens de réaliser que je peux suivre ce script JS et simplement faire le décodage moi-même :

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player%26amp;iframe=true%26amp;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")); 
// renvoie cette iframe
<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>

Je peux autoriser buzzsprout dans allowed iframes et cela fonctionne parfaitement :

image
image1063×332 44.3 KB

2 « J'aime »
12

Peux-tu m’expliquer cela d’une manière qu’un novice comme moi puisse comprendre ? Je souhaite que ce contenu soit jouable directement sur notre forum (notez qu’il ne s’agit pas d’un fichier .mp3 comme ci-dessus) :

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

13

Bonjour Nathan,

Voici les étapes à suivre :

  1. Accédez à la console d’administration et recherchez « iframes autorisées ».

  2. Ajoutez https://www.buzzsprout.com et cliquez sur la coche pour enregistrer le changement.

  3. Ajoutez ceci à votre publication :

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

La balise <div> environnante est facultative, mais je l’utilise car je ne veux pas de barres de défilement dans mes iframes. Si vous souhaitez l’activer, vous devez suivre deux étapes supplémentaires :

  1. Accédez à votre thème actif, cliquez sur « Modifier CSS/HTML » et sélectionnez l’onglet </head>.
  2. Collez ceci et enregistrez :
    <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 « J'aime »
14

Excellent ! Le fait d’avoir supprimé le défilement l’améliore vraiment.

Merci pour ce guide clair - super utile !!

1 « J'aime »