Embedding podcasts from BuzzSprout

support
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)?

1 Like
3

FireShot Capture 157 - Buzzsprout - www.buzzsprout.com

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.

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

2 Likes
7

OK, I will look that up.

1 Like
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>
5 Likes
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

2 Likes
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):

Episode 7: NZ’s Clinical Informatics Leadership Network (CiLN)

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>
4 Likes
14

Brilliant! It really improves it having the scrolling removed.

Thanks for the clear guide - super helpful!!

1 Like