How to Embed Videos in Posts? Version Elgg: 6.1.2

Hello,

I am trying to insert videos using Elgg's default editor, CKEditor.

However, when I insert the video, it only saves on the backend and does not appear on the frontend.

I cannot embed the videos because there is a restriction on the iframe tag. So, how can I adapt this to my project?

I need this functionality, allowing CKEditor to enable this in any text field within the project.



Thank you very much.

  • Overview:

    I modified the base.mjs file located at /var/www/html/matrix/vendor/elgg/elgg/mod/ckeditor/views/default/ckeditor/config to enable enhanced media embedding support, particularly for YouTube videos. This change ensures that embedded media is correctly displayed on both the backend and frontend.
     


    Steps Taken
     

    In the base.mjs file, which is located at /vendor/elgg/elgg/mod/ckeditor/views/default/ckeditor/config, I added the following code to handle the CKEditor setup and improve media embedding functionality:

    
    import 'jquery';
    import elgg from 'elgg';
    
    // Calculate the topbar height dynamically for better viewport offset
    var topbar_height = $('.elgg-page-topbar').height();
    
    export default {
        htmlSupport: {
            allow: [
                {
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true
                }
            ]
        },
        language: elgg.config.current_language, // Define the language of the editor
        ui: {
            viewportOffset: {
                top: topbar_height, // Adjusts the editor's position based on the topbar height
            }
        },
        toolbar: [
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'link', 'unlink', 'blockquote', 'code', '|',
            'bulletedList', 'numberedList', 'indent', 'outdent', '|',
            'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
            'undo', 'redo', '|',
            'mediaEmbed', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells', '|',
            'insertImage', 'insertHorizontalRule', 'subscript', 'superscript', '|',
            'removeFormat', 'source', // Editor options
        ],
        extraPlugins: ['mediaembed'], // Ensure the mediaEmbed plugin is included
        mediaEmbed: {
            previewsInData: true,
            providers: [
                {
                    name: 'youtube',
                    url: /https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/,
                    html: function (match) {
                        var videoId = match[1]; // Extract the video ID from the URL
                        return '';
                    }
                }
            ]
        },
        height: 400, // Set the editor's height
        filebrowserUploadUrl: '/your-upload-url', // URL for file uploads
        filebrowserImageUploadUrl: '/your-upload-url', // URL for image uploads
        removePlugins: ['MediaEmbedToolbar', 'TodoList'], // Remove unnecessary plugins
        uiColor: '#9AB8F3', // Set the UI color for the editor
        autogrow_minHeight: 300, // Minimum height for auto-growing editor
        autogrow_maxHeight: 600, // Maximum height for auto-growing editor
        autogrow_bottomSpace: 50, // Bottom space for auto-grow behavior
        fullPage: true, // Enable full-page editing in CKEditor
    };
    
    // Add this section to reprocess embedded videos after the page loads
    $(document).ready(function () {
        // Find all elements with data-oembed-url attribute (media)
        $('.media div[data-oembed-url]').each(function () {
            var oembedUrl = $(this).data('oembed-url'); // Get the oEmbed URL
            if (oembedUrl) {
                // Extract the video ID from the URL
                var videoId = oembedUrl.match(/v=([a-zA-Z0-9_-]+)/)?.[1];
                if (videoId) {
                    // Replace the div content with the iframe containing the YouTube video
                    $(this).html('');
                }
            }
        });
    });
    
    
    
    


    Key Changes
     

    • Custom Toolbar: I customized the CKEditor toolbar to include options for text formatting, links, media embeds, and other common editor tools.
       
    • Media Embed: The mediaembed plugin was added to handle YouTube videos, allowing videos to be embedded within the content directly by pasting a YouTube URL.
       
    • Auto-Grow Editor: I set up the CKEditor to auto-grow within a specified range of minimum and maximum heights.
       
    • Reprocessing Media: Added a jQuery function to reprocess and replace media embed elements after the page is loaded. This ensures that YouTube videos are correctly embedded on both the frontend and backend.

    With these changes, YouTube videos are now properly embedded and displayed both in the backend editor and on the frontend pages of the website.

     

     

  • You could also have a look at the oEmbed plugin https://elgg.org/plugins/2932901 it replaces urls in text with the embed code for that link.

    So if you paste a youtube link it'll present the youtube video. Same for lots more platforms (X, Facebook, Vimeo, etc)

  • Hi Jerome!

     

    I tried using the oEmbed plugin, but unfortunately, it didn’t work. Any link I tried to share wouldn’t display the content on the frontend in Elgg (even though it was rendered in the HTML).

    The change I suggested above partially solved my problem. I can now add YouTube videos to Blog posts, but the video only appears for logged-in users, even when the post is marked as public.

    So, I’m looking into how to fix this... but oEmbed isn’t working on my end.


    Thanks!

  • @Thiago Reis 

    I'm sure the problem is in Htmlawed library.

    This plugin solves this issue but I haven't tried it for Elgg 6.

    Can you try it and give me feedback?

  • I just downloaded the plugin suggested by Nikolai and it seems to work with Elgg 6.

    I added an iframe to embed a Bandcamp release into a post. Previously, it would only show the link, but now it shows the actual embed. This is very neat.

  • Hello Nikolai !


    I tested the Elgg Hooks plugin, and it started working!

    Some observations about the module:

    • When pasting the shared link directly into the editor, the video is not loaded; only the link appears. To make it work, you need to click "Source" in the CKEditor toolbar and paste the link directly into the editor's HTML code.

    The Elgg Hooks plugin works with the code I suggested at the beginning of the post, also resolving the permission issues.

    I’ll run some more tests and get back soon with additional information. For now, everything is going well...

    Thank you so much for your support!

  • When pasting the shared link directly into the editor, the video is not loaded; only the link appears. To make it work, you need to click "Source" in the CKEditor toolbar and paste the link directly into the editor's HTML code.

    This is not a bug, but a feature ;-)

    Direct link insertion should work with oEmbed plugin

  • Hello,
     

    I did some testing and have a few questions:
     

    1. Thinking long-term, what is the best way to embed videos in posts? My question is whether I should use iframe or the media embed feature in CKEditor. Isn’t using iframe considered insecure?

       

    2. I used an iframe in a post, but the video breaks the layout on mobile devices. However, when using the editor's media embed feature, it works fine.

       

    3. How can I incorporate an external CSS file to try to manipulate the video style, making it responsive and aligning it according to different screen resolutions?

       

    4. The oEmbed plugin doesn’t work. I paste YouTube links directly into the editor, but the link is not converted into a video. It only works if I embed the video using an iframe, inserting the HTML code directly into the editor.


      Thank you very much!

  • for point 4, when pasting the URL make sure it's NOT converted to a clickable link. If it is a link remove that (in the toolbar it's the link icon with the x).

    Then try again. It should work.