Vimeo embed URLs parsed incorrectly in email

bug
1

Vimeo provides two types of urls: direct links (https://vimeo.com/508864124/fcbbcc92fa) and embed links (which can be used in an iframe, but won’t work if clicked directly)

For example:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

  1. When this is sent as a notification email, the direct link appears correctly, but the iframe is replaced into a link with the wrong URL: https://vimeo.com/508864124?h=fcbbcc92fa instead of https://player.vimeo.com/video/508864124?h=fcbbcc92fa

    Even worse, if a (valid) trailing slash is added in the embed URL, the video id is removed in the email: <iframe src="https://player.vimeo.com/video/508864124/?h=fcbbcc92fa" ...></iframe> becomes https://vimeo.com/?h=fcbbcc92fa

  2. Is there a way to bypass the iframe-to-URL conversion altogether? Just like we already do with polls, it says something like “Click here to see the poll”

2

Tricky, we have some special magic to amend how we remap cooked for email processes we can clean up, for sure.

Will put a #pr-welcome for now and consider further prioritization if this pops ups a few more times.

1 Like
3

Thanks, Sam. Can you think of any temporary workarounds to prevent people from seeing the URL on email without having to hide it in a [details] tag?

4

Honestly, I can not think of many workarounds here short of maybe forcing a non oneboxed link underneath it?

https://vimeo.com/185876954
<https://vimeo.com/185876954>


https://vimeo.com/185876954

1 Like
5

@Nacho_Caballero The example you provided of an video that is unlisted, unlisted videos have different url structure.

And the way to embed unlisted video as per Vimeo request is different, ref Use oEmbed with private videos – Help Center

I think a way around may be is to created your own embed using the doc above.

@sam
And for discourse, would it be better may be to use viemo API to get embed src url instaed of building it. ref Vimeo URL I've never seen before with two different IDS. How do I get it to work with one? - Stack Overflow . And those lines releavnt discourse/vimeo_onebox.rb at 657256a099a601a0694d11d15c42ad76988efe8c · discourse/discourse · GitHub

Anyway if my specualtion is right then this should affect typical posting not only email: 1-Minute Audio Test for Stereo Speakers & Headphones-2ZrWHtvSog4

6

To get the iframe I did:

GET https://vimeo.com/api/oembed.json?url=https://vimeo.com/508864124/fcbbcc92fa
So I got

{"type":"video","version":"1.0","provider_name":"Vimeo","provider_url":"https:\/\/vimeo.com\/","html":"<iframe src=\"https:\/\/player.vimeo.com\/video\/508864124?h=fcbbcc92fa&amp;app_id=122963\" width=\"426\" height=\"240\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>","width":426,"height":240,"domain_status_code":403,"video_id":508864124,"uri":"\/videos\/508864124:fcbbcc92fa"}

UTF-8 Decoded: for the iframe

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

The iframe itself

Edit/Update:

I have submitted a PR to fix, I think the problem was with regex pattern. It didn’t captured vimeo correcly when its not the standard type. Thus I changed the regex pattern accordingly.

1 Like
7

@ghassan I just noticed this is still an issue.

If an iframe has an unlisted video, the URL isn’t transformed correctly in the email. For example:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Gets transformed into this (which is a 404): https://vimeo.com/508864124?h=fcbbcc92fa
Instead of the correct URL: https://vimeo.com/508864124/fcbbcc92fa

Maybe the regex that you added in your PR needs an extra step (transform ?h= into / when sending an email)

8

I am trying to remember/resummarize this:

So just to get this straight,

  • There are different types of format of viemo urls, our only issue is with email side of thing, right?
  • To replicate this, one needs to do what:
    • Paste url or iframe on topic (What are all cases of this)
    • It should work as expected on the web but if an email sent with the content of the topic then we it get tricky
9

Yes. The regex change you did made it possible to recognize iframe src URLs (https://player.vimeo.com/video/508864124?h=fcbbcc92fa), so that’s no longer a problem. The issue is on the email that gets sent.

If you paste a plain url (https://vimeo.com/508864124/fcbbcc92fa), there’s no issue. It’s only a problem with the iframe src (https://player.vimeo.com/video/508864124?h=fcbbcc92fa).

It currently does.

Yes. Currently, the iframe src (https://player.vimeo.com/video/508864124?h=fcbbcc92fa) gets converted to this: https://vimeo.com/508864124?h=fcbbcc92fa instead of this: https://vimeo.com/508864124/fcbbcc92fa

10

It’s still hard for me to reproduce because I need to have a premium account to have unlisted video on vimeo.

Also I think your example of video above allow only to loaded from certiain domain, can you allow my sandbox instance to load it as well: https://discuss.gsgapp.io.

Again and be crystal clear, you don’t expect the video to play on E-mail, but you expect when people click on video position to be directed to the correct url? Am I right with that?

11

Done :+1:

Correct :+1:

Thanks for the help!

12

Aha found the issue now:

So what is happening is that when you paste vanila iframe code, then you might bypass onebox code, and if you pass it then the result iframe code will not have data-original-href which is the link that is used in email template.

And when data-original-href is missing discourse tries to guess to the video is that is whatever is after the last / which is of course doesn’t cover the case of unlisted video.

For example if you check the dev tools/inspect element from your browser, the result iframe when using vanfila iframe code:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen ></iframe>

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

While when pasting just url, i.e. let discourse convert it to iframe
https://vimeo.com/508864124/fcbbcc92fa.

<iframe class="vimeo-onebox" src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" data-original-href="https://vimeo.com/508864124/fcbbcc92fa" frameborder="0" allowfullscreen="" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>

So notice the extra data-original-href="https://vimeo.com/508864124/fcbbcc92fa" in the second output, one might guess if that attribute when using iframe vanilla then it should work, but it doesn’t probably because discourse doesn’t allow you to add any attriubte you want…

13

I think I can suggest a solution, and while ensuring it would work for the case when the video is listed/public I came with this ucommon beahvour of vimeo. So typically all videos that are public folllow this pattern vimeo.com/{id} however it will work if you add a slash i.e. vimeo.com/{id}/anything

Consider the following example:

  • https://vimeo.com/767548129/estgsetgset
  • https://vimeo.com/767548129/hey-discurse
  • https://vimeo.com/767548129 The normal

All the above lead to the same video, so the fix can be that to create a url from iframe src, vimeo.com/{_what comes after the first slash}/{What comes from the h=} This shall make it work for both cases.

14

The proposed fix FIX: vimeo iframe url when data-original-href is missing by ghassanmas · Pull Request #18894 · discourse/discourse · GitHub , you can also try it at https://discuss.gsgapp.io where I cherry-picked my commit.

I have perosnally tested for 4 cases:

  • pasting vimeo url of public video
  • pasting vimeo url of unlisted video
  • pasting iframe vanila of of public video
  • pasting iframe vanila of unlisted video

In all cases it lead to the email generating the correct url.

But anyway please try to test for all other possible variation that you might encournter and most importantly that it doesn’t break other thing.

The way I tested the e-mail template is that I would send myself a direct message, and then check the email inbox. (Since I have two accounts regitered at https://discuss.gsgapp.io)

2 Likes
15

Thank you! I tested it as well and it works :+1:

1 Like
16

testing: