ckeditor embed unlisted vimeo video

41 Views Asked by At

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&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;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?

0

There are 0 best solutions below