BuzzSproutからのポッドキャストの埋め込み

サポート
1

人気のあるポッドキャストプレーヤーのコードを埋め込もうとしているのですが、設定を変更してもプレーヤーが表示されません。コードは非常にシンプルです。iframe は簡単だったのですが、これはどうやらうまくいかないようです。

2

関連するコード（機密データを除く）を投稿していただけますか？

「いいね！」 1
3

FireShot キャプチャ 157 - Buzzsprout - www.buzzsprout.com
FireShot キャプチャ 157 - Buzzsprout - www.buzzsprout.com378×208 11.8 KB

4

はい、CSP の観点から言えば、https://www.buzzsprout.com を以下のように CSP に追加するだけで構いません。

image
image1354×304 34.7 KB

ただし、この埋め込みコードがテーマ内の適切な場所に配置されていることも確認してください。

「いいね！」 2
5

はい、URL を追加しましたが、まだ表示されません。テーマの調整方法がわかりません。コミュニティ内のポッドキャストに関連する投稿の冒頭に、単にコードを貼り付けただけです。

6

ああ、通常の投稿では <script> タグを投稿できません。もしそれを許可すれば、ユーザーが簡単にサイトを混乱させてしまう可能性があります。ポッドキャストの URL だけを別行に投稿してみましたか？「ワンボクシング」という機能があり、それを使えば特別な埋め込みなしで対応できるかもしれません。

「いいね！」 2
7

わかりました、調べてみます。

「いいね！」 1
8

こんにちは、Penar さん。

試しにやってみたのですが、ワンボックス表示になりませんでした：

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

彼らのスクリプトタグの使用が不可能な場合、他に選択肢はありますか？

9

そのスクリプトはサイトテーマに一度埋め込むだけで済むものですか、それとも iframe の隣に配置する必要がありますか？

編集：自分で答えを見つけました。iframe 固有のものだったようです。これはあまり親切ではありませんね。

10

それは直接の MP3 ファイルです。その場合、HTML の audio タグを使用できます：

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

@pmusaraj 非常に役立ちます。ありがとうございます！

こんにちは @Stephen、

「iframe 固有」とはどういう意味でしょうか？彼らが提供するのはこれです：

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

実は、@Aaron_Norris さん、今気づいたのですが、その JavaScript スクリプトを追跡して、自分でデコードすればよいことに気づきました：

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")); 
// これを返す 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>

allowed iframes に buzzsprout をホワイトリストに登録すれば、完璧に動作します：

image
image1063×332 44.3 KB

「いいね！」 2
12

私のような技術に不慣れな人にもわかるように、その方法を説明してもらえませんか？この音声を当フォーラム内で再生できるようにしたいのですが（上記の .mp3 ファイルとは異なります）。

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

13

こんにちは、ネイサンさん。

手順は以下の通りです：

  1. 管理コンソールにアクセスし、「allowed iframes」を検索します。

  2. https://www.buzzsprout.com を追加し、チェックマークをクリックして変更を保存します。

  3. ご自身の投稿に以下を追加します：

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

囲んでいる <div> は必須ではありませんが、私は iframe にスクロールバーが表示されないようにするため使用しています。これを有効にしたい場合は、さらに以下の 2 手順を実行する必要があります：

  1. 使用中のテーマに移動し、「Edit CSS/HTML」をクリックして、</head> タブを選択します。
  2. 以下を貼り付けて保存します：
    <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
14

素晴らしい！スクロールを削除することで、本当に改善されました。

明確なガイドをありがとうございます。とても役立ちました！！

「いいね！」 1