Embedding a buzzsprout podcast player using <script> tag does not work as expected.

[brendenmoore]

Description

I'm trying to embed a buzzsprout podcast player on a gatsby website. I put the embed code in a script tag using Helmet. The script looks for a div with a specific id, and then adds the podcast player there.

<Helmet>
        <script
          type="text/javascript"
          charset="utf-8"
          src="https://www.buzzsprout.com/231452.js?player=small&limit=1&container_id=buzzsprout"
        ></script>
</Helmet>
 <div id="buzzsprout">
        Player should appear here
</div>

This works in development but when deployed, there is a bug where the player just shows up at the top of the page. When I turn on the DEV_SSR flag, gatsby throws the following error:

Generating development SSR bundle failed

Reading from "https://www.buzzsprout.com/362981.js" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "https:" URIs.

File: https:\www.buzzsprout.com\362981.js?player=small&limit=1&container_id=buzzsprout

Steps to reproduce

Insert the code above in any gatsby page. Here is the reproduction

There is another way that works that involves using an iframe. However, this method does not allow for automatically grabbing the most recent podcast episode, which can be seen in the demo above.

Expected result

The podcast player should load within the div with the id of "buzzsprout"

Actual result

In development, it works correctly. When built, it puts the player on the top of the page instead of the div.

Environment

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.11 - ~\AppData\Roaming\npm\npm.CMD
Languages:
Python: 3.9.1 - /c/Python39/python
Browsers:
Chrome: 89.0.4389.114
Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
npmPackages:
gatsby: ^3.2.1 => 3.2.1
gatsby-plugin-gatsby-cloud: ^2.2.0 => 2.2.0
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
npmGlobalPackages:
gatsby-cli: 3.2.0

[LekoArts]

You'll need to change your index page to this:

import React from 'react'
import {Helmet} from 'react-helmet'

const Index = () => {
  return (
    <div style={{ maxWidth: "700px", margin: "auto" }}>
      <p>
        In the build, the player appears at the very top of the page. The
        embedded player should appear below
      </p>
      <Helmet>
        <title>Buzzsprout demo</title>
        <script
          type="text/javascript"
          charset="utf-8"
          defer
          src="https://www.buzzsprout.com/231452.js?player=small&limit=1&container_id=buzzsprout"
        />
      </Helmet>
      <div
        id="buzzsprout"
      />
      <p>
        iframe works fine, however, with the embed script, I am able to load the
        most recent episode automatically, whereas with the iframe I have to
        provide a specific episode id.
      </p>
      <iframe
        scrolling="no"
        width="100%"
        height="200"
        frameBorder="0"
        title="Podcast Player"
        src="https://www.buzzsprout.com/231452/8212589-big-changes-coming-to-apple-podcasts-and-spotify?client_source=small_player&amp;iframe=true"
      ></iframe>
    </div>
  )
}

export default Index

1. Components should be uppercase
2. frameBorder not frameborder
3. Add the defer tag to the script: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes

Otherwise your script will run before it found the div (which can/should be empty). https://www.buzzsprout.com/help/15-find-embed-code shows that the script is under the div so it's run after the div is parsed

[brendenmoore]

Thank you. I did not know about the defer attribute. That did the trick.

…

On Thu, Apr 8, 2021, 3:57 AM Lennart ***@***.***> wrote: You'll need to change your index page to this: import React from 'react'import {Helmet} from 'react-helmet' const Index = () => { return ( <div style={{ maxWidth: "700px", margin: "auto" }}> <p> In the build, the player appears at the very top of the page. The embedded player should appear below </p> <Helmet> <title>Buzzsprout demo</title> <script type="text/javascript" charset="utf-8" defer src="https://www.buzzsprout.com/231452.js?player=small&limit=1&container_id=buzzsprout" /> </Helmet> <div id="buzzsprout" /> <p> iframe works fine, however, with the embed script, I am able to load the most recent episode automatically, whereas with the iframe I have to provide a specific episode id. </p> <iframe scrolling="no" width="100%" height="200" frameBorder="0" title="Podcast Player" src="https://www.buzzsprout.com/231452/8212589-big-changes-coming-to-apple-podcasts-and-spotify?client_source=small_player&amp;iframe=true" ></iframe> </div> )} export default Index 1. Components should be uppercase 2. frameBorder not frameborder 3. Add the defer tag to the script: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes Otherwise your script will run before it found the div (which can/should be empty). https://www.buzzsprout.com/help/15-find-embed-code shows that the script is under the div so it's run after the div is parsed — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#30752 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMSRQVC2PZHLERRJ6AXSV5LTHVOWJANCNFSM42SKR5AQ> .