Conceal default video player controls in Google Chrome

I have a dilemma with hiding the default play button in the center of my video. Even though I have a custom play button, the native play button is still showing underneath it on tablets and mobile devices. Unfortunately, I am unable to access the CSS for it using either 

::--webkit-media-controls-play-button
or 
::-webkit-media-controls-start-playback-button
.

I'm facing a similar challenge as described in this Stack Overflow post but I haven't been able to find a suitable solution yet.

The CSS snippet provided below will hide all controls, which does work, however, I specifically want to only hide the play button:

video::-webkit-media-controls{
    display: none;
    -webkit-appearance: none;
}

Does anyone have any suggestions?

htmlcssgoogle-chromehtml5-video

Answer №1

After some research, I was able to locate the solution in the comments section, and I can verify that it indeed functions on Chrome for Android.

video::-webkit-media-controls-overlay-play-button {
  display: none;
}

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

Automatic table width expansion with CSS

I'm in the process of creating a new website, and I want the layout to resemble the following: +---+--------------+ |# | | |n | #page | |a | table.basic | |i | | |g | | |a | | |t | ...

htmlcss

What is the best way to eliminate alternative styling from a chart component in C#.NET?

I've encountered an issue with a stacked chart component on a c#.net webform from the MS Chart Control Library. Initially, I dragged the control onto the design surface and then proceeded to edit the source html (.aspx page) to assign the element a cs ...

asp.netcss

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

javascripthtmlbrowser

How can I customize the color of the border/background on my jquery menu?

I have been using the jquery function menu() to generate a menu, and it's working as expected. However, there is one aspect that I would like to customize: the white border around the menu button should be black instead. You can see what I mean by ...

jquerycssmenubackground-color

Error encountered during Bootstrap 4 SCSS compilation: Invalid US-ASCII character identified as "xE2"

Encountering difficulties when compiling certain bootstrap 4 modules (switching from beta3). Despite the fact that the issue can be resolved by adding @charset: 'UTF-8'; to the _hover.scss mixin partial (which is flagged as deprecated within the ...

csssassbootstrap-4twitter-bootstrap-4

Dynamic content container with customizable sidebar

I have a query that remains unanswered in my research on various CSS layout options. Hence, I decided to share it here. My ongoing project involves a fluid/fixed two-column design. The main content is placed on the left side while the sidebar resides on t ...

htmlcsslayoutpositioningfluid

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

htmlcsswebfrontendresponsive

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

What is the process for connecting controls to Canvas sprites?

Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...

javascripthtmlanimationcanvashtml5-canvas

The font family of Material-ui ToolbarTitle is no longer retained

https://i.sstatic.net/ygdwe.png The tutorial mentioned that the title should be styled with the Roboto font, just like the Options title above. However, despite including the Roboto font via a CDN in my project, the font does not appear as expected in my o ...

javascriptcssfontsmaterial-ui

What is the method for selectively applying a "fade to black" mask to an input field?

For my current project, I need to incorporate a design feature where a "fade to black" mask gradually appears on the left side of an input field once the text content reaches the maximum visible width of the input box. The image below provides a visual re ...

javascripthtmlcss

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Is there a way to make a text field insert hyphens automatically after certain numbers? For example, when typing a date like 20120212, could we have the input automatically formatted with hyphens after the first 4 digits and the second two, so it displays ...

phpjavascripthtml

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index

My current project involves two stacked divs, each measuring 100px by 100px. The bottom div includes a black border on top, as shown in this example. <div id="top"></div> <div id="bottom"></div>​ div { width: 100px; height ...

csscss-floatpositionz-index

Pop-up notification badge using AJAX technology

Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...

phpjqueryajaxcss

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

javascripthtmlvue.jsvuejs2

issue with href attribute not functioning as intended

I found this code snippet on this website. It seems to work fine, but when I click on a tab, instead of changing the content in the body (<a href="#tab2success" data-toggle="tab">), it redirects to localhost:9000/#tab2success, which doesn't exis ...

javascripthtmlcssangularjs

Gradient transition effect changing background color from bottom to top

I am facing an issue where I have a block and I want the background color to animate from bottom to top on hover. Can you please help me identify what is causing this problem? Your assistance is greatly appreciated. .right-block--wrapper { backgroun ...

javascripthtmlcss

What are the steps to incorporating the League Gothic font into my website design?

Is there a way to incorporate League Gothic font into my website design? Visit the League Gothic GitHub repository Appreciate any guidance on this matter, ...

htmlcssfonts

How can I determine in JQUERY when all ajax requests on a page have finished processing?

Is there a way in JQUERY to determine when all ajax calls on a page have finished? I need to run a specific method once all the ajax calls are done. ...

javascriptjqueryhtmlajax

Using Javascript to target elements with identical attributes

I have some HTML similar to the code below: <form name="test_form"> <input type="hidden" name="product_id" value="560"> <input type="hidden" name="product_name" value="test product"> <input type="hidden" name="product_type" value="7"& ...

javascriptjqueryhtml