Estou tentando incorporar o código de um player de podcast popular, mas nenhuma configuração que altero faz o player ser renderizado. O código é muito simples. Os iframes foram fáceis. Este, por outro lado, não consigo entender.
<div id=‘buzzsprout-small-player-1157708’></div><script type=‘text/javascript’ charset=‘utf-8’ src=‘Data Driven Real Estate’></script>
Você pode postar o código relevante (excluindo quaisquer dados privados)?
OK, no que diz respeito ao CSP, você deve simplesmente adicionar https://www.buzzsprout.com ao seu CSP, da seguinte forma:
Mas certifique-se de que este embed também esteja colocado no local correto no seu tema.
Ok, eu adicionei a URL, mas ela ainda não está sendo renderizada. Não tenho certeza de como ajustar o tema. Eu estava apenas colando o código no topo das postagens relacionadas a podcasts na comunidade.
Ah, você não pode postar uma tag <script> em uma postagem normal; se permitíssemos isso, os usuários poderiam facilmente bagunçar seu site. Você já tentou postar apenas o URL do podcast em uma linha separada? Temos um recurso chamado oneboxing, que pode funcionar no seu caso, sem necessidade de incorporações complicadas.
Ok, vou procurar isso.
Oi Penar,
Acabei de testar isso e não gera o onebox:
https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3
Já que usar a tag de script deles não é uma opção, tenho outras alternativas?
O script é algo que pode ser incorporado uma vez no tema do site ou precisa estar adjacente ao iframe?
edit: Respondi à minha própria pergunta, é específico do iframe, isso realmente não é muito útil da parte deles.
Esse é um arquivo MP3 direto. Nesse caso, você pode usar a tag HTML de áudio:
<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
@pmusaraj Isso é super útil. Obrigado!
Olá @Stephen,
O que você quer dizer com específico para iframe? É isso que eles fornecem:
<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>
Na verdade, @Aaron_Norris, acabei de perceber que posso seguir esse script JS e simplesmente fazer a decodificação eu mesmo:
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"));
// retorna este 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>
Posso adicionar o buzzsprout à lista de permissões em iframes permitidos e funciona perfeitamente:
Você pode explicar isso de um jeito que gente como eu, sem muita técnica, consiga entender? Quero ter isso reproduzível dentro do nosso fórum (nota: não é um arquivo .mp3 como acima):
Olá Nathan,
Aqui estão os passos:
Acesse o console de administração e pesquise por “allowed iframes”
Adicione https://www.buzzsprout.com e clique no ícone de marca de verificação para salvar a alteração
Adicione o seguinte ao seu 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>
A tag <div> ao redor é opcional, mas eu a utilizo porque não quero barras de rolagem nos meus iframes. Se você quiser ativá-las, precisará seguir mais dois passos:
<head><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>
Brilhante! Realmente melhora ter a rolagem removida.
Obrigado pelo guia claro — super útil!!