인기 있는 팟캐스트 플레이어의 코드를 삽입하려고 하는데, 어떤 설정을 바꿔도 플레이어가 렌더링되지 않습니다. 코드는 매우 단순합니다. iframe은 쉬웠는데, 이건 아무리 해도 해결이 안 됩니다.
개인 정보를 제외한 관련 코드를 올려 주시겠어요?
네, URL을 추가했는데도 여전히 렌더링이 안 돼요. 테마를 어떻게 조정해야 할지 모르겠어요. 커뮤니티에서 팟캐스트 관련 포스트 맨 위에 코드를 그대로 붙여넣기만 했거든요.
아, 일반 게시글에 <script> 태그를 올릴 수 없어요. 그렇게 허용하면 사용자가 사이트에서 쉽게 문제를 일으킬 수 있거든요. 팟캐스트 URL만 단독 줄로 올리는 걸 시도해 보셨나요? 우리는 원박싱(oneboxing)이라는 기능이 있어서, 복잡한 임베드 없이도 이런 경우에 활용할 수 있어요.
네, 알아볼게요.
Penar님,
방금 시도해 봤는데 원박스(onebox) 처리가 되지 않습니다:
https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3
스크립트 태그 사용이 불가능한 상황에서 다른 대안이 있을까요?
스크립트는 사이트 테마에 한 번만 내장하면 되는 건가요, 아니면 iframe 바로 옆에 배치해야 하나요?
수정: 제 질문에 제 스스로 답을 찾았네요. iframe 전용이더군요. 그쪽이 좀 더 친절하게 설명해 주지 않아서 아쉬워요.
그것은 직접적인 mp3 파일이므로, 이 경우 HTML 오디오 태그를 사용할 수 있습니다:
<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
@pmusaraj 정말 유용한 정보네요. 감사합니다!
@Stephen님,
"iframe specific"라고 하신 게 무슨 뜻인가요? 그들이 제공하는 코드는 다음과 같습니다:
<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 스크립트를 따라가서 직접 디코딩하면 됩니다:
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"));
// 이 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>
allowed iframes에 buzzsprout을 화이트리스트에 추가하면 완벽하게 작동합니다:
나처럼 둔한 사람도 이해할 수 있도록 설명해 주시겠어요? 이걸 우리 포럼 안에서 재생할 수 있게 하고 싶은데(위와 달리 .mp3 파일이 아닙니다):
네이선님,
다음은 해당 단계입니다:
-
관리자 콘솔로 이동하여 "allowed iframes"를 검색합니다.
-
https://www.buzzsprout.com을(를) 추가하고 체크 표시를 클릭하여 변경 사항을 저장합니다. -
게시물에 다음을 추가합니다:
<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>
주변의 <div>는 선택 사항이지만, iframe에 스크롤바가 표시되기를 원하지 않기 때문에 사용하고 있습니다. 활성화하려면 두 가지 추가 단계를 따라야 합니다:
- 활성 테마로 이동하여 "Edit CSS/HTML"을 클릭하고
</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>
정말 훌륭해요! 스크롤을 제거하니 확실히 훨씬 좋아졌네요.
명확한 가이드를 올려주셔서 정말 감사해요 - 정말 큰 도움이 됩니다!!