You uploaded a video to WordPress and it plays. But it looks exactly like every other video player on the internet. A plain gray bar, default buttons, none of it matching your site. You want to change the colors, the buttons, maybe the speed options. WordPress does not hand you an obvious way to do that.
This guide covers two ways to customize it: writing a little code yourself, or letting a plugin do it. Both are real options, and which one fits depends on how hands-on you want to be.
First, a quick word check
Two terms come up throughout this guide.
- HTML5 video player. The player your browser shows for any uploaded video file, without any extra plugin. It is built into every modern browser, which is why it looks the same everywhere.
- Shortcode. A short piece of text wrapped in square brackets, like
[my_video]. You paste it into a page, and WordPress swaps it out for the real thing when a visitor loads the page.
What WordPress gives you by default
When you upload a video file and add it with the built-in Video block, WordPress shows it using your visitor’s browser player. Play, pause, a progress bar, volume, and a fullscreen button. That is it.
Three things beginners usually want to change first. The color of the progress bar. Which buttons show up. The size and shape of the player. None of those have a setting in the block editor. To change them, you either write some code, or hand the job to a plugin.
The two ways to customize an HTML5 video player
Route 1: code. You write a small amount of CSS, the language that controls how things look on a web page, to change the colors. Getting further sometimes needs a little JavaScript too, the language that controls how things behave. This suits someone comfortable pasting a code snippet into their theme and checking that nothing broke.
Route 2: a plugin. You install a player plugin, pick a color and a layout from a settings screen, and it applies everywhere. This suits someone who wants the result without touching code.
Below, we will walk through both. Since a fair number of people land on this page looking for the plain code version, we start there.
Customizing the controls with code
The browser’s built-in player uses standard HTML, which is the code that structures a web page. That means normal CSS can reach it, at least partially.
video::-webkit-media-controls-panel {
background-color: #1c1f1c;
}That single rule recolors the control bar’s background in Chrome and Safari. Firefox and Edge use different, less flexible hooks. That is the honest limit of this approach. Styling the browser’s own controls only ever gets you partway there, and it looks different in every browser.
For real control over every button, most developers turn off the browser’s built-in controls entirely. Then they build their own with a small amount of JavaScript, the code that adds interactivity to a page. That is a bigger project than a single CSS rule. It is exactly the gap a player plugin closes, without you writing any of it.
What this route costs you
- You are editing theme code, so a mistake can affect how your whole site looks.
- Full control over every button needs JavaScript, not just CSS, which is a bigger step.
- You maintain it yourself. If WordPress or your theme changes, your snippet might need updating too.
Use it when: you are comfortable with code and want one small, specific change.
Changing colors and the player layout with a plugin
This is where Route 2 comes in. Lean Player is a free WordPress.org plugin built around exactly this problem. It gives you a video player that actually matches your site, set from a settings screen instead of code.
In the free version:
- One accent color for every player on your site, set once in Lean Player > Settings.
- Five ready-made control bar layouts to choose from, picked once for your whole site.
- A poster image for each video you upload, the picture that shows before someone presses play.
- A shape setting for each video, so a square or portrait video does not get forced into a widescreen box.
- Playback speed control, including which speeds show up in the menu and which one plays first, both usable for free.
One honest limit worth knowing. You can design your own custom control bar for free, in Settings > Player Layout. Choose exactly which buttons appear, and in what order. Applying that custom design to an actual player is a paid feature. On the free plan, you pick from the five ready-made layouts instead. They cover the same basic buttons, just without the custom arrangement.
Setting it up
- Go to Plugins > Add New, search for Lean Player, then install and activate it.
- Go to Lean Player > Settings and pick your accent color and a control bar layout.
- Create a player under Lean Player > Add New and upload or link your video.
- Copy the shortcode shown on that screen and paste it into your page, or use the Elementor Video widget instead.
The shortcode looks like this, with your own player’s number in place of 123:
[lean_video id="123"]Adding a poster image and setting playback speed
Both of these live on the same screen as your video, no separate settings needed.
- Edit your player and look for the poster image field. Upload any image from your media library.
- In Lean Player > Settings, set your starting playback speed. Pick which speeds appear in the speed menu, such as 1x, 1.25x and 1.5x.
One more honest note, on captions. If you embed a YouTube or Vimeo video, captions come from that service’s own player and just work. For a video file you uploaded yourself, custom caption files are not supported yet in the current release. If captions matter for an uploaded file today, that is worth knowing before you plan around it.
When the change does not seem to show up
The accent color still looks like the old one. Your browser is showing a cached copy of the page. Reload with your cache cleared, or check the page in a private browsing window, before assuming the setting did not save.
The CSS snippet does nothing in one browser but works in another. Expected, not a bug. Each browser exposes its own set of hooks for styling its built-in player, and they are not the same set. A rule that recolors the bar in Chrome may simply have nothing to attach to in Firefox.
The color changed on some videos but not others. A pro-only per-player color override is set on the ones that did not change, and that overrides the site-wide setting. Check that player’s own settings first.
Which route should a beginner take?
| Code (CSS and JavaScript) | Lean Player | |
|---|---|---|
| Cost | Free | Free |
| Setup time | An hour or more, depending on how much you change | A few minutes |
| Coding required | Yes | No |
| Works the same in every browser | No | Yes |
| Site-wide accent color | Only if you build it yourself | Yes |
| Playback speed control | Needs JavaScript | Yes, built in |
| Elementor widget | No | Yes |
The short version. Comfortable with code and want one small tweak? Route 1 works. Want your player to match your site without writing anything? Use a plugin.
Common questions
Can I change the video player’s color without writing code?
Yes, with a player plugin. Lean Player sets one accent color for every video on your site from a single settings screen.
Does this work with YouTube and Vimeo, not just uploaded files?
Yes. The same accent color and layout settings apply whether the source is YouTube, Vimeo, or a file you uploaded yourself.
Will a plugin slow my site down?
Lean Player’s files load only on pages that actually have a player on them, not across your whole site.
Can I set a different look for one specific video?
The site-wide accent color and layout are free. Overriding them for just one player is a paid feature. Most sites want one consistent look rather than a different one per video, so that is the free default.
Do I need to know any code?
No, not if you use a plugin. Every setting mentioned in Route 2 is a color picker, a dropdown, or a copy-paste shortcode.
Ready to customize yours?
If you are comfortable with code and only need one small change, like recoloring the progress bar, the CSS snippet above will get you there. It works in Chrome and Safari.
If you want your player to actually match your site, colors, layout, poster images and playback speed included, without touching code, install Lean Player free from WordPress.org. Setting your accent color and layout takes a few minutes.
Curious what else it does, including what the paid version adds? Have a look at the Lean Player page.