Able Player Width Tests
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