# How to embed JavaScript script in front of ,\</body\> tag

**URL:** https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159
**Category:** Development
**Created:** [September 15, 2023, 2:34pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159 "2023-09-15T14:34:16Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![zengyunsi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zengyunsi/32/265722_2.png) [@zengyunsi](https://meta.discourse.org/u/zengyunsi)
#### Post date: [September 15, 2023, 2:34pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/1 "2023-09-15T14:34:16Z")

</div>

I want to change a style for video in discourse, how to embed JavaScript script before ,`</body>` tag

Tried editing it in the HEAD, it doesn’t work perfectly!

Thanks!

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/5/a/85aa174e5139d09876af65cb5368267f60cab73b.jpeg)

```plaintext
      <script src="/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

```

```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Video Player</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
    <script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
</head>
<body>
    <video controls>
        <source src="your-video.mp4" type="video/mp4">
    </video>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>
</body>
</html>

```

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 15, 2023, 3:54pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/2 "2023-09-15T15:54:49Z")

</div>

Where are you changing it? In a theme component that you created in the UX? (I don’t know what that image is.)

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [September 16, 2023, 2:06pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/4 "2023-09-16T14:06:35Z")

</div>

> [@zengyunsi](#):
>
> `<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>`

It is most likely because you have not added this domain name to the CSP Policy.

很有可能是因为你没有把这个域名加入CSP Policy。

And to be honest, I recommend you to copy this js file directly and throw it in the `<script>` tag to prevent users from loading js from an external website. This is not safe - unless you completely trust this website.

而且说实话，我更推荐你直接把这个js文件复制过来扔在`<script>`标签里，以免用户还要加载外部网站的js，这并不能说安全——除非你完全信任这个网站

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/3/3/d33563cdff33a789dedb3dea77306307f53f95fa.png)

---

<div class="post-metadata">

### Author: ![zengyunsi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zengyunsi/32/265722_2.png) [@zengyunsi](https://meta.discourse.org/u/zengyunsi)
#### Post date: [September 16, 2023, 3:38pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/5 "2023-09-16T15:38:04Z")

</div>

It’s mainly this sentence, the previous ones are not a problem

```plaintext
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>
</body >

```

---

<div class="post-metadata">

### Author: ![zengyunsi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zengyunsi/32/265722_2.png) [@zengyunsi](https://meta.discourse.org/u/zengyunsi)
#### Post date: [September 16, 2023, 3:40pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/6 "2023-09-16T15:40:55Z")

</div>

It can only be placed at the end of the body. This is to initialize the player after the page has finished loading.

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [September 16, 2023, 3:41pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/7 "2023-09-16T15:41:15Z")

</div>

~~ 

You can use the discourse plugin api.

 

```plaintext
<script type="text/discourse-plugin" version="0.8">
api.decorateCookedElement((elem, helper) => {
    const player = new Plyr('video');
}, {id: "beauitfy-video"})
</script>

```

 ~~

Ah, you only need to load once? Then pretend I didn’t say it

> [@zengyunsi](#):
>
> 只能放在body结尾

It makes no difference. Don’t you have an eventListener?

---

<div class="post-metadata">

### Author: ![zengyunsi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zengyunsi/32/265722_2.png) [@zengyunsi](https://meta.discourse.org/u/zengyunsi)
#### Post date: [September 16, 2023, 3:56pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/8 "2023-09-16T15:56:27Z")

</div>

😅 I don’t understand how to do it. It needs to be placed before the body.

---

<div class="post-metadata">

### Author: ![zengyunsi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zengyunsi/32/265722_2.png) [@zengyunsi](https://meta.discourse.org/u/zengyunsi)
#### Post date: [September 16, 2023, 4:15pm UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/9 "2023-09-16T16:15:10Z")

</div>

Checked and understood. Add it in this place.

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/d/0/bd04fd7f751bfccb7272d5482a20b78f72458a00.png)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 17, 2023, 3:31am UTC](https://meta.discourse.org/t/how-to-embed-javascript-script-in-front-of-body-tag/279159/11 "2023-10-17T03:31:13Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
