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:
AI-generated summary
The discussion revolves around the issue of excessive white space above and below Vimeo embedded videos on mobile devices. aatishrkamble initially reported the problem and provided screenshots and example URLs to reproduce the issue.
aatishrkamble explained that the issue arises from the static width and height of the iframe tag, while Vimeo’s embedded video resizes to 100% width with auto height. A similar issue occurs with other video embeds, but they adjust to the full container space and display a black background.
A potential solution proposed by awesomerobot is to give the Vimeo iframe a black background, which would improve the appearance on mobile devices. codinghorror agreed to implement this solution for now.
Additionally, ddf mentioned that a similar issue occurs with Streamable videos.
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.