Customizing the default Google Chrome video player controls

Feeling tired of the mundane appearance of the Google Chrome native html5 video player?

Each time they make a change, it seems to get even more unappealing.

The bright white color scheme is completely unfulfilling in my opinion.

I took matters into my own hands and created a userstyle to give it a dark look.

This is the progress I've made so far, but I'm struggling to change the color of the little circle.

Any assistance would be greatly appreciated.

This is my current code:

video::-webkit-media-controls-panel {
    background-color: #161618;
}

video::-webkit-media-controls-volume-slider-container {
    background-color: cyan;
}

video::-webkit-media-controls-volume-slider {
    background-color: #1FB2B0;
}

video::-webkit-media-controls-timeline {
    background-color: #1FB2B0;
}

Here is the link to the jsfiddle for reference:

https://jsfiddle.net/cyc1j0nv/7/

csshtmlgoogle-chromevideo

Answer №1

After some experimentation, I managed to reach my desired destination by applying a filter to the overall media controls. It's worth noting that filters can also be applied to each individual pseudo-element of the controls.

video::-webkit-media-controls{
  filter: hue-rotate(180deg) brightness(0.9);
}
<h1>Customizing video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>

*Please remember to add vendor-prefixes to the CSS if needed

Answer №2

Changing the appearance of the small blue circles in CSS is not possible as they are images embedded in Chrome. Perhaps utilizing a CSS3 image filter property could potentially achieve the desired effect.

It's important to note that overriding these internal Chrome styles comes with a risk, as they may change without warning in future versions of the browser. This could lead to unexpected behavior on pages that heavily rely on them.

If you're looking for customizable media controls for your website, exploring various JavaScript media players would be a more flexible solution. These options offer more control and can work seamlessly across different web browsers.

Answer №3

By skillfully positioning the controls without covering the original video screen, I was able to achieve success using the following methods:

 video::-webkit-media-controls-enclosure {
    overflow:hidden;
    position: absolute;
    bottom:-32px
}

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

To eliminate the download button, I included the following code:

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Specificity Problem

Is there a way to determine specificity in CSS? Although that's not my main question, I encountered an issue where I defined a class for a Div element but the styles are not being applied even though I declared the class last. Here is a snippet of my ...

htmlcssstylesheet

I am looking to send data to a checkbox using Python and the Selenium web-driver. What is the best

I am attempting to automate the process on this particular webpage by inputting data into a checkbox that has a unique @id. Even though I have tried utilizing code snippets I discovered online, my attempts keep falling short due to the element not being f ...

cssselenium-webdriver

Trying onClick and addEventListener, but nothing seems to be working

Hey there, can someone help me figure out why my deck of cards isn't displaying when the "audiobooks" link is clicked? I've tried various solutions like using onclick in the a tag to call the function and applying eventListener the other way arou ...

javascripthtmljsonapionclick

Creating an art exhibit in an illuminated amp lightbox using Django

Currently, I am immersed in a project that involves Django on the back-end and amp on the front-end. However, I am facing some challenges in connecting both tags, particularly when it comes to implementing a lightbox feature. What I aim to achieve is a li ...

pythonhtmldjangopython-3.xamp-html

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

cssreactjsflexboxmaterial-ui

Eliminate repetitive content in CSS document

I recently discovered the SCCS Compiler () and I am impressed with its capabilities. However, I am in need of an additional feature. After generating a compressed CSS file, I noticed the following: html,body{height:100%;}html,body{height:100%;}html,body{ ...

phpcssmedia-queriesuniquesubstr

Generate a jQuery iframe once more by requesting it

How can I use jQuery to create an iframe tag and set it as the only content of a specific div? If the target div already has content, I want to replace it with a dynamically created iframe tag. This is what I have attempted so far: $(".someClass").click ...

jqueryhtmliframe

Using the :not selector with links: a guide

I implemented a hover effect for the links on my website. However, I want this effect to be applied to every link except those within a specific div. Sample HTML <div id="menu"> <div class="menu_item"> <a href="index.html" title="Home" tar ...

csscss-selectors

Can you share with me the XPath to locate Discord's input box?

My goal is to utilize Selenium to send messages on Discord, but I am struggling to locate the correct XPath for the input box. I have experimented with XPaths like '/html/body/div[1]/div[2]/div/div[2]/div/div[1]/div/div[2]/div[3]/div[2]/main/form/div ...

htmlseleniumxpath

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

Reasons for implementing attribute normalization in AngularJS

I am currently in the process of learning AngularJS through w3schools. The website offers a helpful example on creating custom directives, which can be found at Custom Directives. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/ang ...

javascripthtmlangularjsangular-directive

The agreement button is unclickable for the bot due to a selenium element interaction issue

<input id="agreement-input-mobile" class="agreement-input" type="checkbox" name="agreement" aria-describedby="agreement-content"> When attempting to automate a specific task, I encounter an issue whe ...

pythonhtmlselenium

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

JQuery - Unable to replace the old name with the new one

Hello, I am currently working on jQuery. I have a code snippet to update the project name. It includes an input field and a save button. The process involves fetching the current project name, displaying it in the input field, allowing for edits, and the ...

jqueryhtmlcssbootstrap-4

How about: "What about Using Percentage-Based Image Holders?"

I'm wondering if it's possible to use a placeholder with percentages instead of pixels. I know there's code that allows for pixel dimensions, but is there a way to use percentages? Currently, the code for the placeholder is img src="http://p ...

htmlcssimageplaceholderwireframe

Transition in the background color of a button while the superfish menu gracefully drops down

I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...

jquerycssdrop-down-menufadeinsuperfish

Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height. Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a butt ...

htmlcssbootstrap-4flexboxcentering

Header sticking in place (Wordpress layout)

As a newcomer to HTML/CSS/PHP, I am taking on the challenge of building a website using an existing WP theme called onetone with a sticky header feature. Despite customizing it extensively, I have encountered a frustrating issue with the header. You can v ...

jqueryhtmlcsswordpressheader

Slider with Dual Images: A Visual Comparison

I'm currently working on a webpage that features before and after images using a slider based on mouse movement to display both pictures. I am trying to incorporate multiple sliders on the same page but have been facing difficulties in getting them to ...

javascriptjqueryhtmlcss

Add a layer on top of the background in order to cover the entire screen

After researching various SO questions and answers, as well as examining different JSFiddle and Codepen examples, I have yet to find the solution I am looking for... Here is a sample fiddle of my current issue: https://jsfiddle.net/ts4t13hn/3/ Below is ...

htmlcssbootstrap-4