mnwalker
commented
7 months ago A vimeo link such as https://vimeo.com/872446476/ffac314xxx is now converted to embed code below in ckeditor.
<iframe src="https://player.vimeo.com/video/872446476"
While if go to embed page in vimeo get this
<iframe src="https://player.vimeo.com/video/872446476?h=ffac314xxx&badge=0&autopause=0&player_id=0&app_id=58479"
The second part of the URL needs to be converted into the ?h= attribute of the iframe.
The media embed code for youtube supports an optional second parameter so should be possible, tried to modify myself but couldn't get it working, hopefully a quick and easy fix for the devs familar with this.
, { name: "youtube", url: [/^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/, /^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/, /^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/, /^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/], html: t => { const e = t[1], n = t[2]; return <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://www.youtube.com/embed/${e}${n??start=${n}:""}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> } }, { name: "vimeo", url: [/^vimeo\.com\/(\d+)/, /^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/, /^vimeo\.com\/album\/[^/]+\/video\/(\d+)/, /^vimeo\.com\/channels\/[^/]+\/(\d+)/, /^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/, /^vimeo\.com\/ondemand\/[^/]+\/(\d+)/, /^player\.vimeo\.com\/video\/(\d+)/], html: t => <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://player.vimeo.com/video/${t[1]}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> }, {
I'm not sure exactly when Vimeo changed this but they now require the hash to be included as part of the embed for videos marked as private. See here for more details https://developer.vimeo.com/api/oembed/videos. I've tested this a lot on a client's account I've been working on and it seems to only affect newly uploaded videos that have the privacy setting turned on. Older videos with the privacy setting turned on do not seem to be affected.
✔️ Expected result
I would expect to see the embedded video.
❌ Actual result
The embed shows with an error message.
❓ Possible solution
My suggestion is to update the regex to account for the possible hash, or to use Vimeo's oembed which will return the proper iframe code, or at the least the uri which contains the vimeo ID and the hash if applicable. Note that to use the oembed api you have to supply the hash, so the best solution is probably to update the regex.