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.
Can you post the relevant code (minus any private data)?
OK, as far as CSP is concerned, you should simply add https://www.buzzsprout.com
to your CSP, like so:
But make sure this embed is placed in the right place in your theme, too.
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.
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.
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?
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.
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>
@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&iframe=true&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&iframe=true&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:
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)
Hi Nathan,
Here are the steps:
-
Go to the admin console and search “allowed iframes”
-
Add
https://www.buzzsprout.com
and click the check mark to save the change -
Add this to your post:
<div data-theme-iframe="no-scroll"> <iframe src="https://www.buzzsprout.com/1717287/8537076?client_source=small_player&iframe=true&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:
- Go to your active Theme, click on “Edit CSS/HTML” and select the
</head>
tab - 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>
Brilliant! It really improves it having the scrolling removed.
Thanks for the clear guide - super helpful!!