Vimeo embeds have too much white space on mobile

[aatishrkamble (Aatish Kamble)]

Videos embedded by pasting the Vimeo URL have too much white space above and below the embedded video on a mobile device.

Check these URLs on mobile to reproduce the problem:

Vimeo embedded player is no longer?

Having some issues with Vimeo videos not being embedded with a player automatically. Eg: The strange thing is, in the past, these have embedded a player. It’s really weird as a url which worked in older posts (and still does) will not embed a player if the url is pasted in to a new topic. This only seems to be the case on free accounts, videos on ‘Plus’ accounts don’t appear to suffer this problem. Is this a Vimeo issue, rather than Discourse? Any idea why links posted in the past still…

https://try.discourse.org/t/testing-video-embeds/1369

Screenshots:

[awesomerobot (Kris)]

So what’s happening here is that our iframe tag has a static width and height, but Vimeo’s embedded video resizes to 100% width and has auto height.

This also happens with other video embedded in oneboxes once you start playing the video, but they anticipate the size variation so they utilize the full container space and give it a black background.

Here’s dailymotion, for example:

I guess the simplest thing we can do here is give the Vimeo iframe a black background? It would look like this:

We need a static height because otherwise the layout would jitter while the page loads… not sure if we can/should do anything fancier like determine the aspect ratio and adjust the dimensions for smaller screens (@techAPJ )?

[codinghorror (Jeff Atwood)]

Yeah let’s just go with the black background for now.

[ddf]

Samething happen with Streamable.