CODEWITHSUNDEEP
htmlcssaudiohtml5-audio
Adrian
Adrian

Reputation: 145

Is it possible to set HTML5 Audio player's size using % in CSS?

Is it possible to style the width of the HTML5 audioplayer in %? I tried it, but I found no solution.

Upvotes: 3

Views: 7068

Answers (3)

Philip Kirkbride
Philip Kirkbride

Reputation: 22879

In 2016 most browsers support simply applying CSS width %:

audio {
  width: 80%
}
<audio controls id="player" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3"> 
    <source src="" type="audio/mpeg"><br> 
</audio>

Tested on Firefox & Chromium

Upvotes: 2

Johannes
Johannes

Reputation: 67776

No, it isn't - at least not reliably across browsers and OSs. Every browser (or mobile OS) has its own design for the HTML5 audio player / audio tag, and most of them won't react to any attempts to change it via CSS at all.

One way to work around that is to use the jQuery plugin "jPlayer" (http://jplayer.org/) which uses HTML5 audio wherever possible, has a Flash fallback option, and has its own default "skin". But it also allows you to build your own skin for it. That requires really getting into its structure (i.e. learning by trying), but once you've understood it, it gives you quite some freedom to create your own audio player design.

If I understood it correctly, they hide the default interface of the HTML5 audio player and set up a HTML/JS structure which accesses the available JS events controling audio playback. Those html elements have classes which then can be styled by yourself via CSS rules.

Upvotes: 2

mrwhynot
mrwhynot

Reputation: 67

<audio controls id="player" style="width: 80%;"> 
    <source src="" type="audio/mpeg"><br> 
</audio>

OR in your stylesheet you can give a width to the "player" ID.

<style>
    #player { width: 80%;}
</style>

Upvotes: 0

Related Questions