Feature aspect ratio

[petemill]

A problem with the outputPlayerSize option is that it is not good for fluid widths, i.e. responsive design where you may use width: 100%; max-width: 800px on a media element, for example.

In order to have a fluid-width media element, you need the height to grow proportionally to the width and the aspect ratio of the media element. This happens by default for images, but not for videos. Instead, it is common to use the padding-top percentage trick. (when a percentage is used for padding-top or padding-bottom, it is actually a percentage of it's container width).

This adds an option outputPlayerAspectRatio which outputs an additional container element, required for this common technique, and adds the style="padding-top: XX.XX% attribute to this element.

Users must also add position: relative; to this element, keep it at the default width: 100%, and position the media iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%. Then whatever width or max-width the outer container is set at, the height of the video will grow and shrink accordingly.

• code
• test
• documentation
• linter and spec passes

note: rather inappropriately, this branch is based on the branch from #3 and so should not be merged until that PR is.