Player size issue on mobile

[swashbuck]

Subject of the issue

On mobile, the player size is sometimes incorrect. This leads to the player being unusable.

The .vimeo__video div is sometimes getting a padding-top value of 6.25% when it should be more like 56.25%. When this issue occurs, videoWidth is like 3840 and videoHeight is like 240 instead of something like 2160. 240 seems like a default/fallback value?

adapt-vimeo/js/VimeoView.js

Lines 47 to 50 in a811ce5

	async setupResponsiveSizing() {
	const videoWidth = await this.player.getVideoWidth();
	const videoHeight = await this.player.getVideoHeight();
	this.$el.css('padding-top', `${videoHeight / videoWidth * 100}%`);

The adapt-vimeo plugin uses v2.26.0 of ​https://github.com/vimeo/player.js. The latest version on GitHub is v2.29.3.

Your environment

• adapt-vimeo 3.4.0
• FW 5.50.0
• Mac Firefox 141.0.2

Steps to reproduce

1. Add the Vimeo component example from example.json.
2. View the course on a phone or in responsive mode in a browser (ex. 366 x 730). You may need to reload the page several times.

Expected behaviour

Video player is an appropriate size.

Actual behaviour

Video player is too small to use.

[danielghost]

Checking the dimensions as follows seems to produce consistent results rather than awaiting the individual width and height, which can differ to what is expected:

async setupResponsiveSizing() {
  const dimensions = [this.player.getVideoWidth(), this.player.getVideoHeight()];
  const [videoWidth, videoHeight] = await Promise.all(dimensions);
  this.$el.css('aspect-ratio', `${videoWidth} / ${videoHeight}`);
  this.trigger('ready');
}

Changed from using padding-top to setting the aspect-ratio for readability, but not important for capturing the correct values.

Waiting for the loaded player event before sizing doesn't seem to return accurate values either.