Embedding podcasts from BuzzSprout

Product Support

AI-generated summary

The discussion is about embedding podcasts from BuzzSprout. Embedding Code Issues: Aaron_Norris initially tried to embed the code but couldn’t render the player, even after adding the URL to the Content Security Policy (CSP) as suggested by pmusaraj. Alternative Solution: pmusaraj suggested using the HTML audio tag to embed the podcast, which worked for Nacho_Caballero.

Iframe Solution: Nacho_Caballero discovered that the provided JavaScript code could be decoded to reveal an iframe. By whitelisting BuzzSprout in the “allowed iframes” setting, the iframe can be used to embed the podcast. Nacho_Caballero provided a step-by-step guide on how to do this. Removing Scrollbars: To remove scrollbars from the iframe, an additional CSS/HTML edit is required, which Nacho_Caballero also explained. nathank found this solution helpful and appreciated the clear guide.

1

I’m trying to embed code from a popular podcast player but no setting I change will render the player. The code is very simple. iframes was easy. This one I can’t seem to figure out.

2

Can you post the relevant code (minus any private data)?

3

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

4

OK, as far as CSP is concerned, you should simply add https://www.buzzsprout.com to your CSP, like so:

image
image1354×304 34.7 KB

But make sure this embed is placed in the right place in your theme, too.

5

OK, I did add the URL but it still won’t render. Not sure how to adjust theme. I was simply pasting the code at the top of the posts that had to do with podcasts in the community.

6

Ah, you can’t post a <script> tag in a normal post, if we allowed that, users could easily make a mess on your site. Did you try posting just the URL of the podcast on its own line? We have a feature called oneboxing, and that could work for your case, without any fancy embeds.

7

OK, I will look that up.

8

Hi Penar,

I just tried this and it doesn’t onebox it:

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

Since using their script tag is out, do I have any other options?

9

Is the script something which can be embedded once in the site theme, or does it need to be adjacent to the iframe?

edit: answered my own question, it’s iframe-specific, that’s really not very helpful of them.

10

That is a direct mp3 file, in that case you can use the HTML audio tag:

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

@pmusaraj That’s super useful. Thank you!

Hi @Stephen,

What do you mean by iframe specific? This is what they provide:

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

Actually, @Aaron_Norris I just realized that I can follow that js script and simply do the decoding myself:

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")); 
// returns this 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>

I can whitelist buzzsprout in allowed iframes and it works perfectly:

image
image1063×332 44.3 KB

12

Can you explain that in a way that thickos like me can understand? I want to have this playable within our forum (note it isn’t an .mp3 as above):

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

13

Hi Nathan,

Here are the steps:

  1. Go to the admin console and search “allowed iframes”

  2. Add https://www.buzzsprout.com and click the check mark to save the change

  3. Add this to your post:

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

The surrounding <div> is optional, but I use it because I don’t want scrollbars in my iframes. If you want to enable it, you need to follow two more steps:

  1. Go to your active Theme, click on “Edit CSS/HTML” and select the </head> tab
  2. Paste this and save:
    <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>
14

Brilliant! It really improves it having the scrolling removed.

Thanks for the clear guide - super helpful!!