Clever Geek Handbook

Remove max width on audio player in Chrome

I would like the default HTML5 audio player to match the width of its parent container. I set it to display "block" and width to "100%". However, it looks like Chrome starts adding padding on the left and right sides after it exceeds a certain window size:

Chrome

Firefox behaves as I would like, with the player edges reaching exactly to the edge of the parent div:

Firefox

How do I uninstall an add-on in Chrome?

EDIT :: As pointed out in the comments, this looks like a max width (not padding) ...

Thank!

+3


source to share


2 answers


The DOM shadow has max-width: 800px

: enter image description here

You can use ::-webkit-media-controls-enclosure

to override it:



audio::-webkit-media-controls-enclosure {
    max-width: 100%; /*or inherit*/
}

http://jsfiddle.net/3qLbdrka/4/

+8


source


There is an issue with chrome 138419 marked as "WontFix". The reason is that it is by design. Developers will have to create their own user interface for special cases like yours (there may be a way to override this in CSS).



0


source






More articles:


All Articles