Any Way to Make Html5 Audio Responsive in Bootstrap?
I Have a Simple Html5 Audio Player That I Would Like to Make Responsive in Bootstrap. Is There a Way to Make the Div Containing This Audio Player Responsive No...
I have a simple HTML5 audio player that I would like to make responsive in Bootstrap.
<div class="col-sm-4 col-sm-offset-4">
<audio controls style="width: 600px;">
<source src="sample.mp3">
</audio>
</div>
Is there a way to make the div containing this audio player responsive no matter what content is in it or at least a class or something to make the audio player responsive? Hoping to not have to use an external library if possible.
Thanks!
2 Answers
I suggest to use width:100% and max-width:600px.
When you make the window smaller in a desktop browser you will not see it the same way as on a real mobile device, but the audio element on mobile devices (i.e. iOS, Android) is definitely going to be smaller anyways - you don't have much influence on its apprearance. Together with those settings it should adapt to just about any situation properly.
(You just might want to add a second source tag with the audio in ogg format and also add the file format in the source tag/s, see )
Try:
<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3">
<audio controls class="embed-responsive-item">
<source src="sample.mp3">
</audio>
</div>
Ref:
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
