Plyr: Add support for variable aspect ratio videos on Vimeo

[zamiang]

I am currently trying to support some vertical and square videos from Vimeo.

It looks like I will need to set some of the 'vimeo hack' attributes manually (since they are setup for 16:9 videos). But I don't understand where these magic numbers come from:

    > div {
        position: relative;
        padding-bottom: 200%;
        transform: translateY(-35.95%);
    }

https://github.com/Selz/plyr/blob/a318e8588ba9b48d0c13cd573455695bd3bb0678/src/scss/plyr.scss#L197

There should likely be some documentation around what brought about those particular numbers.

[sampotts]

They were the numbers which worked really - from trial and error. The common method of achieving 16:9 ratio for the iframe embeds is with padding-bottom: 56.25% but that would have meant the controls were visible. Vimeo decided that hiding the controls by with a flag is a "premium" feature (you need a Pro account) yet YouTube just allows it. It's not ideal both technically and ethically (getting around their limitation) I suppose, but it works.

[sampotts]

Others have asked about 4:3 support amongst others for Vimeo so I'll work on something for it.

[dequid]

Any news on this?

[dequid]

Since i have a couple of videos on vimeo in cinemascope aspect ratio (2.35:1), i added this to my css, where #video is the plyr-div.

/* hack for scope ratio vimeo videos */
#video > div {
    position: relative;
    transform: translateY(-39.59%);
}

.plyr__video-embed {
    padding-bottom: 41.6%;
}

[sampotts]

It’s actully included in v3. See the issue with info on upgrading.

[sampotts]

Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍