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.

  • PS: it's possible to configure ckeditor to not automatically make a clickable link, but i don't remember the setting.

  • PS: it's possible to configure ckeditor to not automatically make a clickable link, but i don't remember the setting.

     

     

    Hi Jerome!

    I’m sorry, the embed plugin does work!

    The issue was with the plugin configuration in the backend.

    Whitelisted domains for oEmbed support was set as:

    https://youtube.com,
    https://youtube.com.br,
    https://www.youtube.com/watch?v=,
    

    When I left the configuration blank, the plugin worked.

  • The oEmbed plugin solved the issue of inserting videos and adjusting the layout. When inserting the link, it must not have any formatting.

    There’s only a small difference in the video layout depending on the link format. For example:

    https://www.youtube.com/watch?v=vE26dVkCvpw  
    https://youtu.be/vE26dVkCvpw?si=qBS0Sou_DYqD8TGI  
    

    One video appears larger than the other. I know this is a minor issue, but for the sake of standardization, I’ll run some tests and get back to you soon.

    When pasting the link (without formatting) into the editor, it doesn’t convert in the backend (which is fine); it’s only rendered on the frontend. I’ll run some tests with adjustments in the file:

    /vendor/elgg/elgg/mod/ckeditor/views/default/ckeditor/config/base.mjs


    Thank you for your help; your suggestion works. The issue has been resolved.
     

  • The issue was with the plugin configuration in the backend.

    Whitelisted domains for oEmbed support was set as:

    https://youtube.com,
    https://youtube.com.br,
    https://www.youtube.com/watch?v=,
    

    When I left the configuration blank, the plugin worked.

    In the help text of the plugin settings it gives you a hint of what you should fill in.

    https://youtube.com is an URL, not a domain. The domain of that link would be 'youtube', that will catch any URL with the same domain (like https://www.youtube.com or https://youtube.com).

    There’s only a small difference in the video layout depending on the link format. For example:

    https://www.youtube.com/watch?v=vE26dVkCvpw  
    https://youtu.be/vE26dVkCvpw?si=qBS0Sou_DYqD8TGI  
    

    One video appears larger than the other. I know this is a minor issue, but for the sake of standardization, I’ll run some tests and get back to you soon.

    With the plugin setting 'height' we try to make sure the format is the same, but it can still be that the height is the same but the width isn't. Let me know of any issues.

  • Hello!
     
    I ran some tests, and CKEditor works well when sharing YouTube videos, either by pasting the direct link into the editor or using the media Embed feature.
     
    The issue is that the iframe doesn’t work for non-logged-in users. The idea behind the code is to ensure that shared videos have a standardized height and width and are responsive on mobile devices.
     

    Copy the code below and paste it into:
     

    <elgg_folder>/vendor/elgg/elgg/mod/ckeditor/views/default/ckeditor/config/base.mjs

    ==============================================

    CODE :

    // Gets the height of the top bar, if present

    var topbar_height = $('.elgg-page-topbar').height();
     
    // Define the language of the editor
    language: elgg.config.current_language,
     
    // UI configuration: setting top margin based on the top bar height
    ui: {
        viewportOffset: {
            top: topbar_height,
        }
    },
     
    // Toolbar configuration
    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',
    ],
     
    // Ensure to include the mediaEmbed plugin
    extraPlugins: ['mediaembed'],
     
    // Configuration for the mediaEmbed plugin
    mediaEmbed: {
        previewsInData: true,
        providers: [
            {
                name: 'youtube',
                url: /https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/,
                html: function (match) {
                    var videoId = match[1];
                    return '<div class="responsive-video-container" style="position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; margin: 0 auto; max-width: 1000px; text-align: center;">' +
                        '<iframe src="https://www.youtube.com/embed/&#39; + videoId + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen' +
                        ' style="position: absolute; top: 0; left: 0; border: none; width: 100%; height: 100%;">' +
                        '</iframe></div>';
                }
            }
        ]
    },
     
    // Function to apply responsive styles to the iframe
    function applyIframeStyles() {
        $('.elgg-output.ck-content iframe').each(function () {
            var $iframe = $(this);
     
            // Ensure the iframe is inside a responsive container
            if (!$iframe.closest('.responsive-video-container').length) {
                $iframe.wrap('<div class="responsive-video-container" style="position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; max-width: 1000px; margin: 0 auto; text-align: center;">');
                $iframe.css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    border: 'none',
                    width: '100%',
                    height: '100%',
                });
            }
        });
    }
     
    // Apply responsive styles as soon as the page loads
    $(document).ready(function () {
        // Apply responsiveness immediately
        applyIframeStyles();
     
        // Adjust the video width based on screen resolution
        $(window).on('resize', function () {
            $('.responsive-video-container').each(function () {
                var $container = $(this);
                var parentWidth = $container.parent().width();
     
                // Adjust the maximum width based on screen size
                if (parentWidth < 1000) {
                    $container.css('max-width', parentWidth + 'px');
                } else {
                    $container.css('max-width', '1000px');
                }
            });
        }).trigger('resize');
    });
     
    // Insert style rules directly in the HTML for non-logged-in users
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .responsive-video-container {
                position: relative;
                overflow: hidden;
                padding-top: 56.25%;
                width: 100%;
                max-width: 1000px;
                margin: 0 auto;
                text-align: center;
            }
            .responsive-video-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                border: none;
                width: 100%;
                height: 100%;
            }
        `)
        .appendTo('head');

     

    ========================================================

    How to standardize shared videos through iframe? The code above does not work for users not connected to the network.


    Thanks