Vimeo embed URLs parsed incorrectly in email

[Nacho_Caballero]

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”

[sam (Sam Saffron)]

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.

[Nacho_Caballero]

@Nacho_Caballero

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”

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?

[sam (Sam Saffron)]

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

[ghassan (Ghassan Maslamani)]

@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

[ghassan (Ghassan Maslamani)]

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.

FIX: Vimeo regex pattern

[Nacho_Caballero]

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

[ghassan (Ghassan Maslamani)]

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

[Nacho_Caballero]

@ghassan

There are different types of format of viemo urls, our only issue is with email side of thing, right?

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.

@ghassan

Paste url or iframe on topic (What are all cases of this)

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

@ghassan

It should work as expected on the web

It currently does.

@ghassan

if an email sent with the content of the topic then we it get tricky

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

[ghassan (Ghassan Maslamani)]

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?

[Nacho_Caballero]

@ghassan

can you allow my sandbox instance to load it as well: https://discuss.gsgapp.io.

Done

@ghassan

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?

Correct

Thanks for the help!

[ghassan (Ghassan Maslamani)]

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.

discourse/discourse/blob/dea44ec923b1f4fced6dafbbf8109820cf1ca7a4/lib/pretty_text.rb#L479-L490

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…

[ghassan (Ghassan Maslamani)]

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.

[ghassan (Ghassan Maslamani)]

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)

[Nacho_Caballero]

Thank you! I tested it as well and it works

[Nacho_Caballero]

testing:

1-Minute Audio Test for Stereo Speakers & Headphones-2ZrWHtvSog4