# Buzzsprout에서 팟캐스트 임베딩

**URL:** https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067
**Category:** Support
**Created:** [7월 17, 2020, 6:28오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067 "2020-07-17T18:28:49Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Aaron\_Norris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_norris/32/187348_2.png) [@Aaron\_Norris](https://meta.discourse.org/u/Aaron_Norris)
#### Post date: [7월 17, 2020, 6:28오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/1 "2020-07-17T18:28:49Z")

</div>

인기 있는 팟캐스트 플레이어의 코드를 삽입하려고 하는데, 어떤 설정을 바꿔도 플레이어가 렌더링되지 않습니다. 코드는 매우 단순합니다. iframe은 쉬웠는데, 이건 아무리 해도 해결이 안 됩니다.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7월 17, 2020, 6:32오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/2 "2020-07-17T18:32:16Z")

</div>

개인 정보를 제외한 관련 코드를 올려 주시겠어요?

---

<div class="post-metadata">

### Author: ![Aaron\_Norris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_norris/32/187348_2.png) [@Aaron\_Norris](https://meta.discourse.org/u/Aaron_Norris)
#### Post date: [7월 17, 2020, 6:36오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/3 "2020-07-17T18:36:07Z")

</div>

![FireShot Capture 157 - Buzzsprout - www.buzzsprout.com](https://global.discourse-cdn.com/meta/original/3X/7/b/7b7f1fb767c08828af2db1544f822503d6e1f4b2.png)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7월 17, 2020, 6:38오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/4 "2020-07-17T18:38:30Z")

</div>

네, CSP의 경우 단순히 `https://www.buzzsprout.com`을 CSP에 추가하면 됩니다. 방법은 다음과 같습니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/b/1b6d8426ba1d245e20198796779fc65b96fe02ae.png)

다만, 이 임베드가 테마 내에서 올바른 위치에 있는지 반드시 확인해 주세요.

---

<div class="post-metadata">

### Author: ![Aaron\_Norris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_norris/32/187348_2.png) [@Aaron\_Norris](https://meta.discourse.org/u/Aaron_Norris)
#### Post date: [7월 17, 2020, 6:39오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/5 "2020-07-17T18:39:12Z")

</div>

네, URL을 추가했는데도 여전히 렌더링이 안 돼요. 테마를 어떻게 조정해야 할지 모르겠어요. 커뮤니티에서 팟캐스트 관련 포스트 맨 위에 코드를 그대로 붙여넣기만 했거든요.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7월 17, 2020, 6:41오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/6 "2020-07-17T18:41:25Z")

</div>

아, 일반 게시글에 `<script>` 태그를 올릴 수 없어요. 그렇게 허용하면 사용자가 사이트에서 쉽게 문제를 일으킬 수 있거든요. 팟캐스트 URL만 단독 줄로 올리는 걸 시도해 보셨나요? 우리는 원박싱(oneboxing)이라는 기능이 있어서, 복잡한 임베드 없이도 이런 경우에 활용할 수 있어요.

---

<div class="post-metadata">

### Author: ![Aaron\_Norris](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_norris/32/187348_2.png) [@Aaron\_Norris](https://meta.discourse.org/u/Aaron_Norris)
#### Post date: [7월 17, 2020, 6:42오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/7 "2020-07-17T18:42:30Z")

</div>

네, 알아볼게요.

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [8월 31, 2020, 4:37오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/8 "2020-08-31T16:37:13Z")

</div>

Penar님,

방금 시도해 봤는데 원박스(onebox) 처리가 되지 않습니다:

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

스크립트 태그 사용이 불가능한 상황에서 다른 대안이 있을까요?

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [8월 31, 2020, 5:39오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/9 "2020-08-31T17:39:14Z")

</div>

스크립트는 사이트 테마에 한 번만 내장하면 되는 건가요, 아니면 iframe 바로 옆에 배치해야 하나요?

수정: 제 질문에 제 스스로 답을 찾았네요. iframe 전용이더군요. 그쪽이 좀 더 친절하게 설명해 주지 않아서 아쉬워요.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [8월 31, 2020, 5:39오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/10 "2020-08-31T17:39:31Z")

</div>

그것은 직접적인 mp3 파일이므로, 이 경우 HTML 오디오 태그를 사용할 수 있습니다:

```plaintext
<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>

```

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [8월 31, 2020, 7:34오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/11 "2020-08-31T19:34:31Z")

</div>

@pmusaraj 정말 유용한 정보네요. 감사합니다!

@Stephen님,

"iframe specific"라고 하신 게 무슨 뜻인가요? 그들이 제공하는 코드는 다음과 같습니다:

```plaintext
<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님, 방금 깨달은 건데 이 js 스크립트를 따라가서 직접 디코딩하면 됩니다:

```plaintext
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](https://global.discourse-cdn.com/meta/original/3X/3/7/37ad2fb5fcfe457c10ea040cb1d2eeb3eba334b2.png)

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [5월 18, 2021, 2:27오전 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/12 "2021-05-18T02:27:34Z")

</div>

> [@Nacho\_Caballero](#):
>
> `allowed iframes`에 buzzsprout을 화이트리스트에 추가하면 완벽하게 작동합니다:

나처럼 둔한 사람도 이해할 수 있도록 설명해 주시겠어요? 이걸 우리 포럼 안에서 재생할 수 있게 하고 싶은데(위와 달리 .mp3 파일이 아닙니다):

[https://www.buzzsprout.com/1717287/8537076](https://www.buzzsprout.com/1717287/8537076)

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [5월 18, 2021, 9:15오전 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/13 "2021-05-18T09:15:15Z")

</div>

네이선님,

다음은 해당 단계입니다:

1. 관리자 콘솔로 이동하여 "allowed iframes"를 검색합니다.

2. `https://www.buzzsprout.com`을(를) 추가하고 체크 표시를 클릭하여 변경 사항을 저장합니다.

3. 게시물에 다음을 추가합니다:

주변의 `<div>`는 선택 사항이지만, iframe에 스크롤바가 표시되기를 원하지 않기 때문에 사용하고 있습니다. 활성화하려면 두 가지 추가 단계를 따라야 합니다:

1. 활성 테마로 이동하여 "Edit CSS/HTML"을 클릭하고 `</head>` 탭을 선택합니다.
2. 다음을 붙여넣고 저장합니다:

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

```

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [5월 18, 2021, 7:23오후 UTC](https://meta.discourse.org/t/embedding-podcasts-from-buzzsprout/158067/14 "2021-05-18T19:23:31Z")

</div>

정말 훌륭해요! 스크롤을 제거하니 확실히 훨씬 좋아졌네요.

명확한 가이드를 올려주셔서 정말 감사해요 - 정말 큰 도움이 됩니다!!
