This page includes various combinations of audio and video elements. The following rules apply for defining the size of an Able Player instance:

• If width and height attributes are present, these are used to set the default size of the player.
• The above attributes are not valid HTML for <audio>, but are still supported. However, to ensure valid code, data-width can be used instead.
• If no size attributes are present, the player defaults to the intrinsic width of the video.
• The player will not exceed the width of its container, and will scale appropriately in a responsive design.

You can use the width and height attributes to set the player to a size smaller than its container, but not larger.

For additional demos see the Index of Able Player Examples.

Audio Example 1 (default width)

• Width attribute: No
• CSS width of container: Unspecified
• Expected outcome: Player fills width of the screen

Audio Example 2 (width attribute)

• Width attribute: 800
• CSS width of container: Unspecified
• Expected outcome: Player is 800px wide

Audio Example 3 (width controlled by container)

• Width attribute: 800
• CSS width of container: 500px
• Expected outcome: Player fills width of container (500px)

Video Example 1 (Default Size)

• Video intrinsic size: 1920 x 1080
• Aspect ratio: 16:9
• Width/height attributes: Unspecified
• Width of container: Unspecified
• Expected outcome: Player fills width of the screen

Video Example 2 (Width attribute)

• Video dimensions: 1920 x 1080
• Aspect ratio: 16:9
• Width/height attributes: 800 x 450
• Width of container: Unspecified
• Expected outcome: Video displayed at 800 x 450

Video Example 3 (width controlled by container)

• Video dimensions: 1920 x 1080
• Aspect ratio: 16:9
• Width/height attributes: Unspecified
• Width of container: 500px (max-width 100%)
• Expected outcome: Video fills the width of its container, 500px or less.

Video Example 4 (4:3 Aspect Ratio)

• Video dimensions: 640 x 480
• Aspect ratio: 4:3
• Width/height attributes: Unspecified
• Width of container: 500px (max-width 100%)
• Expected outcome: Video fills the width of its container, 500px or less.

YouTube Example 1 (Unconstrained)

• Video dimensions: 640 x 360
• Aspect ratio: 16:9
• Width/height attributes: Unspecified
• Width of container: Unspecified
• Expected outcome: Player fills width of the screen

YouTube Example 2 (width attribute)

• Video dimensions: 640 x 360
• Aspect ratio: 16:9
• Width/height attributes: 800 x 450
• Width of container: Unspecified
• Expected outcome: Video will be displayed at 800 x 450.

YouTube Example 3 (width controlled by container)

• Video dimensions: 640 x 360
• Aspect ratio: 16:9
• Width/height attributes: Unspecified
• Width of container: 500px (max-width 100%)
• Expected outcome: Video fills the width of its container, 500px or less.

Vimeo Example 1 (Unconstrained)

• Video dimensions: Unknown
• Aspect ratio: Unknown
• Inline style dimensions: N/A
• Width/height attributes: N/A
• Expected outcome: Player fills width of the screen.

Vimeo Example 2 (width attribute)

• Video dimensions: Unknown
• Aspect ratio: Unknown
• Width/height attributes: 800 x 450
• Expected outcome: Video displayed at 800px wide

Vimeo Example 3 (width controlled by container)

• Video dimensions: Unknown
• Aspect ratio: Unknown
• Width/height attributes: Unspecified
• Width of container: 500px (max-width 100%)
• Expected outcome: Video fills the width of its container, 500px or less.