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 should 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.
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.