I was hoping to just paste the below into a discourse topic and get an HTML5 mp3 player. (This embedded source comes from a plugin on my Wordpress site.) Pointers, thoughts, … ?? <!-- /*! This file is auto-generated */ !function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),c=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]');for(r=0;r<c.length;r++)c[r].style.display="none";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if("link"===t.message)if(s=l.createElement("a"),n=l.createElement("a"),s.href=a.getAttribute("src"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),n=l.querySelectorAll("iframe.wp-embedded-content");for(t=0;t ```

That is a good first step. From here you can start shopping around for either: A better embed podcast platform that you can use in both wordpress and Discourse leveraging iframes Porting your current player from wordpress into Discourse.

CSP maybe? [image] Mitigate XSS Attacks with Content Security Policy Site Management bookmark This guide explains how to use Content Security Policy (CSP) to mitigate Cross-Site Scripting (XSS) attacks in Discourse. It covers CSP basics, configuration, and best practices. person_raising_hand Required user level: Administrator Summary Content Security Policy (CSP) is a crucial security feature in Discourse that helps protect against Cross-Site Scripting (XSS) and other injection attacks. This guide covers the basics of CSP, how it’s implemented in Discourse, and how to c… Are you pasting it into post or …?

oooooooooh, that looks exactly like the problem… I’ll fiddle with extending the CSP to allow the WP site . . .

Check the browser console error log ..

Posts in Discourse will never allow random pasted JS to run because of security. If all you need is provided by the iframe, you can allow this specific domain in the site settings and paste it in a topic.

I turned the CSP off entirely in the admin (just to see if that’s what’s preventing my iframe from working correctly) note that the full stuff I’m pasting is in the code block in my OP. still doesn’t work… curiously, I only get three console errors, all from Dsicourse’s CDN . . . the code is inserted just before “learn more” [Screen Shot 2020-07-27 at 1.23.22 PM]

[image] Falco: Posts in Discourse will never allow random pasted JS to run because of security. :confused: …oh, that makes sense now that you say it. I was hoping to just copy-n-paste a pile of embed code from the Wordpress plugin I’m using; I wanted to embed an HTML5 player for mp3 audio files. So, that’s not going to work. bummer.

[image] craigconstantine: I wanted to embed an HTML5 player for mp3 audio files. So, that’s not going to work. bummer. We have extensive support for embed and non-embed players, out of the box. Youtube [lofi hip hop radio - beats to relax/study to] Vimeo [WE ARE GEORGE FLOYD] SoundCloud https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265 You can even upload MP3 and MP4 files directly and they become a player.

…yeah, but isn’t that all based on Open Graph being correctly sent from the other server? (I’ve seen/used those soundcloud embed before—they are awesome.) My Wordpress site sends open graph, but it doesn’t do clever-enough OG… https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ is a page with an HTML5 player on it… this oneboxes exactly as I’d expect/hope it would… [image] Cara-Michele Nether: Aikido, wellness, and honesty How can personal experiences with Aikido and wellness practices be used to help others improve their lives through self-awareness, physical health, and personal Reading time: 2 minutes https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ is the WP url for the media item… but again, WP is not smart enough to send enough OG information for a really clever onebox… [image] 083. Cara-Michele Nether: Aikido, wellness, and honesty "083. Cara-Michele Nether: Aikido, wellness, and honesty" from Movers Mindset by Movers Mindset. Reading time: Less than a minute …I’ll try uploading the MP3 file directly… not sure if I can drop ~40Mb mp3 ( times 80+ episodes) into my hosted Discourse though . . .

Adding a link to a mp3 file in a single line like: https://moversmindset.com/podcast-player/7711/083-cara-michele-nether-aikido-wellness-and-honesty.mp3 becomes

I allowed mp3 extension for upload, but I just bump into a size limit [Screen Shot 2020-07-27 at 1.36.00 PM] …which makes sense. I effectively have them already on a file sharing service (our own web site)… but when I drop a naked mp3 file URL I just a get a bare bones browser-based player [at least, that’s what I think the next line is]

Embed HTML5 player for MP3 file

Product Support

Overgrow July 27, 2020, 5:14pm 2

CSP maybe?

Are you pasting it into post or …?

Topic		Replies	Views
Embedding podcasts from BuzzSprout Product Support	13	2816	May 18, 2021
How can I automatically embed a Bandcamp player on my site? Development unsupported-install , embedding	6	2101	February 19, 2023
Mitigate XSS Attacks with Content Security Policy Site Management how-to , content-security-policy	30	25882	June 13, 2023
Floating Audio Player for entire forum Development	31	3404	January 4, 2024
Iframe issue without URL Product Support	9	1637	May 6, 2019

Embed HTML5 player for MP3 file

Related topics