Jump to content

size of audio file player

Recommended Posts

I've used the following code to insert an audio file on a web page:


<p><audio controls>
<source src="audiobook1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
Is it possible to make the visual audio control less wide?
If there is better HTML to use in general, feel free to share!
Sheri Orloff
  • Like 1

Share this post

Link to post
Share on other sites

Hi Jodie,


The files have been uploaded again for your review.


Best wishes,



Share this post

Link to post
Share on other sites

I am looking at this in FireFox on a PC and the audio player is a very nice size... about 50% as wide as the content area. However if you want to change the width or any other styling of this box do this....


Change the first line of the players code to add a style to it. You can name the style anything, I am using "audio" for this example. The code should look like this:

<audio class="audio" controls="">


Then add the class to your theme's stylesheet. If you named it audio it should look like this....


.audio {max-width: 50% !important ;}


You can also add any other styling to you want such as changing the background color to this entry in your stylesheet. When I was playing with it I wouldn't see a width size unless I went below 50%. Also keep in mind that this will apply to how it looks on a mobile device and you don't want it to be much smaller than 70% of the screen in that case.

  • Like 1

Share this post

Link to post
Share on other sites

Thank you, Jodie! Good tip regarding mobile devices, too. Your help is appreciated.



Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Want to Become a VA?
    Invest in The VAC!
    How Do YOU Startup A

    Are You a VAinsider?
    Virtual Assistant Organization Association
    Upgrade Your FREE Account & Receive Today...
    * Access to Our Job Board *
    * VA Training Tracks*
    * Group Coaching *
    * Private Mastermind Area *
    * Business Templates *
    * Contracts & Forms*
    *Checklist & eBooks *
    * Seminar Archives *
    * Plus VAinsider Perks! *

    Virtual Assistant Organization Association

    HootSuite - Social Media Dashboard

    Click to see your AD here!

    Cool Virtual Assistant of the month!

  • Create New...

Important Information

By using this site, you agree to our Terms of Use.