• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
VdoCipher: Secure Video Hosting for Business

VdoCipher

☰
  • Features
  • Pricing
  • Testimonials
  • About
  • Contact Us
Login
Sign Up

Customize Video Player – Change Player Color in WordPress

May 26, 2018 /

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:

  1. Goto WordPress Dashboard
  2. Select the Appearances button
  3. Choose the Customize Option
  4. In the new page, select Additional CSS
  5. 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;
}

view raw
player-color.css
hosted with ❤ by GitHub

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.

Free 30-day trial →
Siddhant Jain

CEO, VdoCipher. Writes about video tech, ed tech and media tech.

www.vdocipher.com
Share on Facebook Share
Share on TwitterTweet
Share on LinkedIn Share
Send email Mail

Filed Under: Using VdoCipher

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Why your videos need VdoCipher DRM protection
Support Tutorial Videos

Categories

  • DRM 
  • APIs and Sample Codes
  • WordPress
  • E-learning
  • Media

Popular Posts

  • WordPress video plugin : Add Secure Videos to your WP site
  • Understanding Video Quality – Pixels (p), Bitrate (kbps), Aspect Ratios
  • Add text to video with dynamic watermarking
  • Encrypted Video Streaming: VdoCipher & Others

Glossary

  • Video Protection and Security
  • Web Technologies
  • Video in Entertainment (OTT)
  • Video in Education
  • Video Production
  • Video Business Models
Recent Blogs
  • Video Hosting for Business: Player, Analytics, Security
  • Top 12 E-Learning Video Platforms [Updated 2021]
  • Types of Video Hosting Services & Use Cases
  • Video Embedding using WordPress LMS Plugins
Popular Blogs
  • How many use easy video download piracy tools ?
  • Quickest Way to Start Your Video Selling Site
  • WordPress course plugin to make course website – Sensei tutorial
  • VdoCipher package Workflow and demo – Secure video streaming
Navigation
  • Home
  • Glossary
  • Features
  • About Us
  • Pricing
  • FAQs
  • Terms
  • Privacy Policy
  • Contact US
Industry
  • Education and Training
  • Media and Entertainment
  • DRM and Antipiracy
  • APIs for Developers
  • Video Hosting and Marketing
Follow Us
We are Amazon AWS Technology Partner for Secure Video Hosting for Business
We use Akamai CDN for Secure Video Streaming for Business

© 2021 VdoCipher Media Solutions Pvt. Ltd.