overwrite mediaEmbed.providers with a custom youtube version which ad…

…ds rel=0 and limit providers to youtube and vimeo
liqd · Nov 22, 2023 · eae8725 · eae8725
1 parent 90aeeb1
commit eae8725
Showing 1 changed file with 54 additions and 0 deletions.
diff --git a/django_ckeditor_5/static/django_ckeditor_5/app.js b/django_ckeditor_5/static/django_ckeditor_5/app.js
@@ -64,6 +64,60 @@ function createEditors() {
             'fileTypes': upload_file_types
         };
 
+        // overwrite embed providers to add rel=0 to youtube videos
+        // this limits videos to youtube and vimeo
+        if(config.mediaEmbed) {
+            config.mediaEmbed.providers = [
+                {
+                    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: match => {
+                        const id = match[ 1 ];
+                        const time = match[ 2 ];
+
+                        return (
+                            '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+                                    `<iframe src="https://www.youtube.com/embed/${ id }?rel=0${ time ? `&start=${ time }` : '' }" ` +
+                                            '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: match => {
+                            const id = match[ 1 ];
+
+                            return (
+                                    '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+                                            `<iframe src="https://player.vimeo.com/video/${ id }" ` +
+                                                    'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+                                                    'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
+                                            '</iframe>' +
+                                    '</div>'
+                            );
+                    }
+                },
+            ];
+        }
+        console.log(config);
+
         ClassicEditor.create(
             allEditors[i],
             config