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)

Welcome to Elgg.

There is no option or button to remove this field.
For this reason, you need to use a custom plugin to alter the view of the add/edit blog form.

You can use this skeleton plugin.

We will use override method to alter the views.

Copy this file:

\mod\blog\views\default\forms\blog\save.php

To this folder:

\mod\my_plugin\views\default\forms\blog\save.php

Open this file and remove this code:

echo elgg_view('entity/edit/header', [
    'entity' => $blog,
    'entity_type' => 'object',
    'entity_subtype' => 'blog',
]);

Tip: Try this TidyPics fork for Elgg 6.

This doesn't guarantee that your issues will be solved, but this fork is at least compatible with the latest Elgg.

Thank you for your reply. Your linked version is the one I installed.