YouTube Vs Vimeo Video embed width

Feature
1

To embed any video we simply paste the video link when creating a topic.
However, why is it that when I embed a YouTube video, (see below) it stretches from end to end? Whereas when I embed a Video from Vimeo, it does not stretch from end to end.

Any way this can be fixed?

I have seen no difference even if I allocate a video size in VIMEO embed code. The video still displays the same as pasting the video link.

In both cases all I do is paste the video URL.

YouTube

Vimeo

Looks like I cannot embed a video here. So here are some screenshots from my community. The Vimeo video width is shorter than the YouTube Video width. Is there a way to make the Vimeo video also expand to the maximum allowed width?

Screen Shot 2022-06-30 at 23.04.06
Screen Shot 2022-06-30 at 23.04.061065×643 139 KB

Screen Shot 2022-06-30 at 23.07.39
Screen Shot 2022-06-30 at 23.07.391074×698 199 KB

4 Likes
2

I have PR for full width vimeo oneboxes

image
image786×2046 166 KB

6 Likes
3

Test

YT

Vimeo

5 Likes
4

Hi Falco,
I am new to discourse and have no idea what does PR mean (as mentioned by you, “I have PR for full width vimeo oneboxes”)

Although you have shown me a test that now works, what do I have to do to get it to work? Because Vimeo videos in my community still do not expand to full fidth.

I am still trying to make sense of what you just did in this post above. I’d really appreciate it if you can tell me what I need to do to fix this in my community. Thanks

1 Like
5

Hey Amber,

PR means “pull request”, and it refers to GitHub. Essentially it means that Falco made a change to the Discourse code, and is looking to get that change reviewed before merging the change into Discourse.

This specific Discourse site, meta.discourse.org, is updated automatically with every change one of our engineers make. Your site is not deployed automatically like that - we deploy customers on a regular, but less frequent, basis. I’ve gone ahead and initiated an deploy (update) for your site. The deploy should complete in ~30 minutes.

Once the deploy is complete, you’ll need to rebuild the post. To do that, click the “show more” button below the post, then click the admin wrench. Lastly, click “rebuild HTML”
image

image
image1095×270 12 KB

image
image574×1038 45.8 KB

4 Likes
6

Falco,
Thank you so much.

Joshua, thank you so much for clarifying everything. Appreciate it.

3 Likes
7

Hi @Falco

Does this change also work with private vimeo embeds? (i.e. the player link with ?h=<some identifier> attached to it)

8

If they worked before they should work with this change looking at the code changes in the commit. :slight_smile:

2 Likes
9

They experience an oddity in embed size. Even after this commit, the size of private videos remains small. I’m hoping there is a way to make those full width too?

1 Like
10

I don’t have a Vimeo account to create those private videos so :person_shrugging:

1 Like
12

I’m having this trouble too. I’m running Discourse 2.9.0.beta9 (56832adf17)

This is especially problematic on small screens (resize this screen and you can see how tiny the second one - the OneBoxed one - becomes).

Here is the link including the player in the URL… (this one doesn’t shrink on smaller screens, but I can’t seem to center it either.)

https://player.vimeo.com/video/743344591

And the one below here is OneBoxed... (this one shrinks and becomes too tiny on smaller screen sizes.) 
https://vimeo.com/743344591

13

So that’s OK? How can be possible that merge won’t impact on our instance?

image
image1186×680 112 KB

I’m probably missing something :slight_smile:

14

How was that posted? Can you share the post raw?

1 Like
15

I’m doing some tests because we started to share some videos from Vimeo into our Discourse community. Here’s the raw:

image
image1495×402 8.99 KB

16

Test

https://vimeo.com/channels/staffpicks/353070045

VS

https://vimeo.com/353070045

We don’t recognize the format of the URL you used, so it’s falling on the generic onebox code instead of the special Vimeo one.

2 Likes
17

I used a link that Jeff shared a couple of years ago. So thanks because now it’s better!

(But) why not full-width? It stills fixed :cry:

18

Because it’s a 4:3 aspect ratio video.

2 Likes
19

Why not apply this same logic to any OneBox’ed source which explicitly specifies its height and width and ultimately gets embedded via an iframe?

Thoughts and Approach
In theory, if we already have the explicit height/width and that’s getting specified on the iframe, the same general approach with setting the aspect ratio could be used to make things scalable generically.

For example, I’ve been embedding more and more video demos in our community, so I switched to Bunny.net, who is known for their CDN, and their Bunny Stream service for uploading and embedding videos.

After adding video.bunnycdn.com and iframe.mediadelivery.net to my allowed iframes setting, I can easily paste in a URL from Bunny Stream and it gets OneBox’ed using one of the generic fallbacks… but the aspect ratio gets really funky when viewed on a mobile device. :confused:

As a quick workaround, I wrote a simple Theme Component which uses the Plugin API and decorateCookedElement to update the iframe with the aspect ratio information.

20

Do we have any updates on this?

Bunny.net gets more and more popular thank to the quality and speed of their services.

Can we embed bunny-streamed videos on Discourse yet?