ProgressionPlayer - Responsive Audio/Video Player

• Default Skin
• MV Default
• Player Sizes
• Fancy Skin
• Dark Skin
• Minimal Dark Skin
• Minimal Light Skin
• Basic Usage

Small & Large Players built-in

We have two player heights built-in. The width can be adjusted to any width.

Small Player

You can activate the small player by surrounding the audio/video in a div with a class of "progression-small".

<div class="progression-small">
    Audio/Video Content goes in between.
</div>

Note: You must also adjust the audioheigiht via javscript (30 is the height of the small player):

audioHeight:30, // height of audio player

Responsive Width Adjustment

You can easily adjust the responsive width via the /css/progression-player.css file at the top. (Section 02. Easy Customization). If you want custom widths per play, use the inline method shown below.

<div class="responsive-wrapper" style="max-width:400px;">

Non-Responsive Width Adjustment

You can adjust the non-responsive width via the javascript at the bottom of the page.

defaultVideoWidth: 480, // if the <video width> is not specified, this is the default
defaultVideoHeight: 270,    // if the <video height> is not specified, this is the default
audioWidth: 400, // width of audio player
audioHeight:40, // height of audio player

Small Default Audio Player

Small Dark Video Player

Large Minimal Dark Audio Player

Large Minimal Light Video Player