# Vimeo embeds have too much white space on mobile

**URL:** https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420
**Category:** UX
**Created:** [7월 19, 2019, 1:58오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420 "2019-07-19T13:58:24Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![aatishrkamble](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aatishrkamble/32/140103_2.png) [@aatishrkamble](https://meta.discourse.org/u/aatishrkamble)
#### Post date: [7월 19, 2019, 1:58오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420/1 "2019-07-19T13:58:24Z")

</div>

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?](https://meta.discourse.org/t/vimeo-embedded-player-is-no-longer/118167):
>
> 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](https://try.discourse.org/t/testing-video-embeds/1369)

**Screenshots:**

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/b/1b8b7356319f154177766bbe0c696acabe04d76a.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 19, 2019, 3:28오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420/2 "2019-07-19T15:28:23Z")

</div>

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:

 ![25%20AM](https://global.discourse-cdn.com/meta/original/3X/2/5/25d793ae1b6c6ad528598f526d3f8d4844e4eb2e.png)

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

 ![59%20AM](https://global.discourse-cdn.com/meta/original/3X/b/9/b9579a3cbaab36c83125129fc2036ea10d365777.png)

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 19, 2019, 9:38오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420/3 "2019-07-19T21:38:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ddf](https://avatars.discourse-cdn.com/v4/letter/d/f475e1/32.png) [@ddf](https://meta.discourse.org/u/ddf)
#### Post date: [7월 19, 2019, 9:46오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420/4 "2019-07-19T21:46:20Z")

</div>

Samething happen with Streamable.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [9월 19, 2019, 11:00오후 UTC](https://meta.discourse.org/t/vimeo-embeds-have-too-much-white-space-on-mobile/123420/5 "2019-09-19T23:00:55Z")

</div>


