Vimeo embeds have too much white space on mobile

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