21:9 Vimeo Embeds

[PoC2]

Hello,

The post-a-link-auto-embed-the-video facility is really neat on Invision but seems (understandably) designed for common 16:9 format videos.

Posting 21:9 (ultra widescreen) format does work but Invision leaves a lot of unnecessary white space around the embed (top and bottom). Is there a way to solve this (besides the facetious)?

Many thanks.

[Jim M]

Are you referring to something like YouTube, Facebook, Vimeo? Or are you referring to an uploaded .mp4 file directly to our software?

[opentype]

Testing …

Text directly after video. 

[PoC2]

23 minutes ago, Jim M said:

Are you referring to something like YouTube, Facebook, Vimeo? Or are you referring to an uploaded .mp4 file directly to our software?

Thanks for asking for the clarification. Yes, a direct paste-a-vimeo-link and automagically convert to an embedded video in the forums (just like @opentype has done above this post).

[Nathan Explosion]

The extra space is being returned by Vimeo themselves - it's the height of the iframe which contains the embedded content. See the following:

https://vimeo.com/api/oembed.json?url=https://vimeo.com/35686630

The response is:

{
	"type": "video",
	"version": "1.0",
	"provider_name": "Vimeo",
	"provider_url": "https:\/\/vimeo.com\/",
	"title": "Stv-Visuals 21:9 Free Loops",
	"author_name": "Stv-Visuals",
	"author_url": "https:\/\/vimeo.com\/stvvisuals",
	"is_plus": "0",
	"account_type": "basic",
	"html": "<iframe src=\"https:\/\/player.vimeo.com\/video\/35686630?h=cc53039083&amp;app_id=122963\" width=\"480\" height=\"204\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen title=\"Stv-Visuals 21:9 Free Loops\"><\/iframe>",
	"width": 480,
	"height": 204,
	"duration": 25,
	"description": "http:\/\/www.facebook.com\/Stvvisuals\n\nLike our page and download the loops for free!\nStv-Visuals 21:9 Free Loops",
	"thumbnail_url": "https:\/\/i.vimeocdn.com\/video\/244200203-99a5d4e8b7ef0a064558ec3f14a32c252135e5d02fa8fd633f4ba11565bb125e-d_295x166",
	"thumbnail_width": 295,
	"thumbnail_height": 124,
	"thumbnail_url_with_play_button": "https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F244200203-99a5d4e8b7ef0a064558ec3f14a32c252135e5d02fa8fd633f4ba11565bb125e-d_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png",
	"upload_date": "2012-01-26 07:36:40",
	"video_id": 35686630,
	"uri": "\/videos\/35686630"
}

The 204 height of the iframe is double the height of the actual video, so you get 51 pixels of space either side of the video within the iframe.

Edited January 21, 2022 by Nathan Explosion

[PoC2]

Interesting! Thank you.

[PoC2]

So is this an issue that Invision needs to talk to Vimeo about, or it it something Invision can compensate for themselves?

[Nathan Explosion]

Looking at this further, there is code within the page called in the iframe that is putting the border in place around the video, - in short, it's Vimeo that need to do something to 'fix' this

[PoC2]

In which case Invision need to get in touch with Vimeo to resolve the issue.

Meanwhile I've found a solution that works for admins but not for general members, unfortunately.

[Nathan Explosion]

29 minutes ago, PoC2 said:

In which case Invision need to get in touch with Vimeo to resolve the issue

Not really, I've got the same border on a basic HTML page, which is where I have been testing.

 

[Jim M]

3 hours ago, PoC2 said:

In which case Invision need to get in touch with Vimeo to resolve the issue.

Meanwhile I've found a solution that works for admins but not for general members, unfortunately.

We use their basic embed code so it would be a problem anywhere it is used, I'm afraid.

[PoC2]

Thank you for the information. Understood. Que sera. 🙂

I will use the admin work around.

Cheers.