Many users ask us about changing the video player color to match their website theme. Since all design elements come down to a few CSS elements, we provide the CSS file below so you can edit the player color. We will be looking to make this a much simpler process in the future.
This blog will provide steps to change player color for WordPress sites. This CSS file can be used for all other front-end website frameworks. You will be needing to edit the desired color at the 5 positions where the default color (#0294f9) is mentioned.
Change Video Player Color in WordPress
Change VdoCipher video player color by adding the following CSS to WordPress. Please follow the steps:
- Goto WordPress Dashboard
- Select the Appearances button
- Choose the Customize Option
- In the new page, select Additional CSS
- Add the CSS in the field given
You can replace the default color value (#0294f9) with your desired color in RGB (for example rgb(255, 99, 71)) or hex (example #ff6347) format. You can experiment with colors and their hex values at HTML Color Codes.
| .vc-container .html5-video-player .ytp-chrome-controls .ytp-button[aria-pressed]::after { | |
| background-color: #0294f9; | |
| } | |
| .vc-container .html5-video-player .ytp-swatch-background-color { | |
| background-color: #0294f9; | |
| } | |
| .vc-container .html5-video-player .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg { | |
| fill: #0294f9; | |
| } | |
| .vc-container .html5-video-player .spinner:before { | |
| border-top-color: #0294f9; | |
| } | |
| .vc-container .html5-video-player .ytp-live-badge[disabled]:before { | |
| background: #0294f9; | |
| } |
Please contact us at support@vdocipher.com for any further help with this code.
Supercharge Your Business with Videos
At VdoCipher we maintain the strongest content protection for videos. We also work extremely hard to deliver the best viewer experience. We'd love to hear from you, and help boost your video streaming business.
Leave a Reply