Ckeditor already supports media embedding by pasting the media link, as documented here. https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html
However it appears that a recent update from vimeo has broken the embed for unlisted videos. The result is the embed showing "This video does not exist"
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.
Digging into ckeditor code have this defining the supported embed patterns.
}, {
name: "spotify",
url: [/^open\.spotify\.com\/(artist\/\w+)/, /^open\.spotify\.com\/(album\/\w+)/, /^open\.spotify\.com\/(track\/\w+)/],
html: t => `<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;"><iframe src="https://open.spotify.com/embed/${t[1]}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div>`
}, {
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 can add the ?h= attribute fine, but struggling to get the 2nd URL component passed into it. Youtube config above shows its possible, but trying to replicate that isn't working. Any ideas?