<audio> width not responsive

[kongebra]

Title says its all. There is nothing doing anything with the audio-width.

My own fix is:
audio { width: 100%; }

[cvrebert]

Sorry, but the title doesn't say enough. Please post a JS Bin or JS Fiddle that demonstrates the problem.

[cvrebert]

Ah, presumably you mean <audio controls>.

[kongebra]

https://jsfiddle.net/juhe9xpj/2/

Yes, with controls, here a fast and simple, but yet shows my problem, if you just resize the Result-window in the width

[RyanZim]

You nearly always sometimes want <audio controls> to be 100% width, however, there might be a few cases this would be undesirable. For example, when using it at the end of a line of text:

<p>Listen: <audio controls src="somefile.mp3"></p>

width: 100%; would cause it to wrap to a new line.

I suggest we set audio { max-width: 100%; } and use .w-100 (pending in PR #19234) for the width: 100%; behavior. This would allow the audio element to render as usual in most cases, but would keep the element from running off the screen or overlapping other content.

[cvrebert]

Probably it should be entirely opt-in, to avoid conflicts with other libraries (similar to how <input>s aren't width:100%; by default and you need to use .form-control explicitly).
Since it doesn't seem like a "better" <audio> requires any further styling beyond tweaking its width, I agree that .w-100 seems sufficient. Adding something like .audio doesn't seem necessary.

[RyanZim]

@cvrebert I agree that an .audio class is unnecessary, however, I still think setting the <audio> element to max-width: 100%; would be beneficial. I can't think of any cases where this would cause a conflict.

If you decide against setting a default for <audio> in favor of an opt-in, we should have a .mw-100 utility to set max-width: 100%;. (Perhaps add it to PR #19234)

[patrickhlauke]

@RyanZim

You nearly always want <audio controls> to be 100% width

evidence for this?

@cvrebert

Probably it should be entirely opt-in

agree, would be far too opinionated otherwise.

Once you start getting into the situation of wanting to make it as wide as possible, without breaking onto a new line, you really get into very specific styling which I'm not quite sure is a good candidate for generalising into a utility class, IMO

[RyanZim]

@patrickhlauke
I edited my comment above.

I don't want it:

as wide as possible, without breaking onto a new line

max-width: 100% would allow <audio> to behave as normal except when its containing element is too narrow, thereby preventing overlapping content. I can't think of any cases where this would cause a conflict. (Correct me if I'm wrong.)

However, I repeat:

If you decide against setting a default for <audio> in favor of an opt-in, we should have a .mw-100 utility to set max-width: 100%;. (Perhaps add it to PR #19234)

[cvrebert]

CC: @mdo

[mdo]

New utils coming in #21221 to help.

[haixiangyan]

@cvrebert I agree that an .audio class is unnecessary, however, I still think setting the <audio> element to max-width: 100%; would be beneficial. I can't think of any cases where this would cause a conflict.

If you decide against setting a default for <audio> in favor of an opt-in, we should have a .mw-100 utility to set max-width: 100%;. (Perhaps add it to PR #19234)

max-width: 100% works for me!! God, you save my day!

For those who wants to make <video/> auto width, you can try put the <video/> into <div/>

<div>
  <video ... />
</div>