Django-ckeditor-5 media embed config for youtube shorts

I am having django project with django-ckeditor-5 package.

The default media providers of ckeditor-5 has youtube. However, I could find from the original source that the regex for youtube do not include shorts url. So, I had to add extraProviders. I tried various ways, but none of them worked.

"mediaEmbed": {
    "previewsInData": "true",
    "extraProviders": [
        {
            "name": "youtube-shorts",
            "url": [
                r"^(https?:\/\/)?(www\.)?youtube\.com\/shorts\/([a-zA-Z0-9_-]+)$",
                r"/^(?:m\.)?youtube\.com\/shorts\/(.+)/",
            ],
            "html": (
                '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">'
                '<iframe src="https://www.youtube.com/embed/{matched}" '
                'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" '
                'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>'
                "</iframe>"
                "</div>"
            ),
        },
    ],
},

this is one of the method I tried, and it gives the below error.

error message

If I use like below for allowing all it works without the preview image like the screenshot below though.

mediaEmbed": {
    "previewsInData": "true",
    "extraProviders": [
        {
            "name": "all",
            "url": r"/^.+/",
        },
    ],
},

without preview

Anyone had experience make this work?

Back to Top