Small audio button

Archive Feature Requests
#1

Hi,
If I type /audio there is a big window appear. I suggest to have the option to collapse the window leaving only play button.
image

#2

I know you can control the width of the widget as a whole, which could get close to what you want:

.AudioVideoNode audio, .AudioVideoNode iframe, .AudioVideoNode video {
    width: 90px;
    height: 100%;
}

But that’s kind of hacky. Probably there’s a better way.

#3

How to shrink the audio window? What add to css? Width doesn’t manage it.

image
image1177×527 33.2 KB

#4

Ah, sorry. Yeah, I think this is the default html audio player. So we might not have much access to style it. Maybe someone else can shine a light.

#5

Edit2:

Use the following code instead of the previous one to avoid cropping videos:

.AudioVideoNode div:not(.react-resizable) {
	width: 100px !important;
	clip-path: inset(0 60px 0 10px);
	margin: 0 -60px 0 -10px;
}

I don’t know if it’s the best way but at least works.
Copy and paste the above code in the Custom CSS and it should take effect :+1:

Original post

I don’t know well why it works, but I could have managed to do this!
Screen Shot 2021-02-17 at 7.02.27

.AudioVideoNode {
	clip-path: inset(0 0 0 10px);
	width: 40px;
}

By the way, I’ve changed the color of the button by this:

audio {
 	filter: invert(0.8)
}

Edit1:

It seems like videos also get cropped by this code. Sorry, I don’t know how to avoid this.

3 Likes
#6

Works perfect, thanks a lot)

:+1: