# Simple steps to modify video player
**URL:** https://meta.discourse.org/t/video/279149
**Category:** Development
**Tags:** chinese-translation
**Created:** [September 15, 2023, 1:11pm UTC](https://meta.discourse.org/t/video/279149 "2023-09-15T13:11:03Z")
**Posts on this page:** 11
**Page:** 1
The discourse mp4 player is ugly, I was thinking about how to improve it and found this, which seems quite simple. The configuration method is also relatively simple, just need to include the css and js.
Add the js and css to the theme header
```html
```
Project Introduction:
[https://mp.weixin.qq.com/s?\_\_biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27](https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27)
---
**English translation:** (courtesy of discourse-ai 🪄)
The MP4 player of Discourse is egregiously unappealing. In my contemplation and exploration to ameliorate it, I stumbled upon this alternative. It exudes a certain minimalistic charm, and its setup methodology is fairly straightforward. Inclusion of the respective CSS and JS does the trick.
Simply integrate the aforementioned JS and CSS into the header of your theme:
```plaintext
```
For a comprehensive introduction to the project, kindly visit:
[https://mp.weixin.qq.com/s?\_\_biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27](https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27)
---
The content in the main text is incorrect and will cause bugs. When loading from the homepage, the player will not work. Below is what I paid $50 for someone to help me modify, shared for free with those in need. The player effect is very good and worth recommending!
Pros:
The color tone is quite matching
The player adapts to the screen from the beginning, rather than from small to large
More features
To publish, just add a video tag:
```html
```
Add in the head, it’s best to download CSS and JS to your own CDN.
```html
```
Add in the main body
```html
```
Final effect:
You can also set subtitle clarity, etc.
---
> [@zengyunsi](#):
>
> ```plaintext
> setInterval(() => {
> let newUrl = location.href;
> if (curUrl !== newUrl) {
> curUrl = newUrl
> if (document.querySelector("video")) {
> new Plyr('video')
> }
> }
> }, 10)
>
> ```
???
恕我直言 这是非常糟糕的代码，糟糕透了。
它将会每10毫秒运行一个99%的时间内都不会起作用的函数，极大的浪费性能。
当然，家用计算机支撑得住这种花销……但它实在是太不优雅了。
IMHO this is very bad code, awful.
It will run a function every 10 milliseconds that will not work 99% of the time, which is a huge waste of performance.
Sure, a home computer could support the expense… but it’s just so inelegant
你应该使用discourse的API来完成这项工作。使用这个：
You should use discourse’s API to do this. use this:
```plaintext
```
> [@zengyunsi](#):
>
> 下面是我花$50请人帮我修改的
~~你应该干脆找我的（just kidding）~~
---
It’s fine, this is just a small gesture. We can talk about more challenging work next time.
(Of course, this doesn’t mean this job is very simple… you have to spend a lot of time reading enough discourse source code to quickly react to which API to call. And if you don’t pay, very few people will really spend time caring about what you want to achieve.)
---