Vimeo embeds have too much white space on mobile

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:

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

Screenshots:

3 Likes

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 )?

3 Likes

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

Samething happen with Streamable.