Log in

Thiago Reis

About me: Web Developer

Activity

  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    Hello,   I did some testing and have a few questions:   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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2
    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... view reply
  • Thiago Reis
    Thiago Reis added a new discussion topic How to Embed Videos in Posts? Version Elgg: 6.1.2 in the group Elgg Technical Support
    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...
    • Thiago Reis
      Thiago Reis

      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.
       

    • Jerome Bakker
      Jerome Bakker

      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.

    • Thiago Reis
      Thiago Reis
      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

    +12 more
  • Thiago Reis
    Thiago Reis joined the group Plugin Development
  • Thiago Reis
    Thiago Reis joined the group Beginning Developers
  • Thiago Reis
    Thiago Reis commented on a page titled Palestra Elgg - Serpro
    O Elgg é um sistema de código aberto, escrito em PHP, no qual é possível criar qualquer tipo de rede social desde que tenha alguma habilidade em programação. Recursos: blogs, microblogging, compartilhamento...
  • Thiago Reis
    Thiago Reis replied on the discussion topic Image above the menu / Imagem acima do menu
    thank attention  solved the problem using the plugin Lees Logo  https://community.elgg.org/plugins/1077181/1.0.0/lees-logo   ==============================   Agradeço atenção Resolvi o... view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic Image above the menu / Imagem acima do menu
    Sorry, any errors text was translated ...  I like to put a custom image in place of elgg logo.  I want to keep the whole structure of the layout.  Custom Logo: How to include images?  Thank you.  view reply
  • Thiago Reis
    Thiago Reis replied on the discussion topic Varias oportunidades de emprego para trabalhar como Desenvolvedor Elgg, Home Office
    Tenho interesse... no aguardo. view reply
  • Thiago Reis
    Thiago Reis added a new discussion topic Image above the menu / Imagem acima do menu in the group Theme Development
    Good Morning.  Please can someone tell me how to include an image above the menu?  The plugin needs to be compatible with version 1.9.3  follow print  Thank...
  • Thiago Reis
    Thiago Reis joined the group Theme Development
  • Thiago Reis
    Thiago Reis joined the group Elgg Brasil
  • Thiago Reis
    Thiago Reis has a new avatar
    Thiago Reis

Pages

No pages created yet

Friends

No friends yet.

Bookmarks

No bookmarks

Send private message

You must be logged in to send a private message.

Group membership

More groups

Plugins

We couldn't find any plugins, themes or language packs at the moment.

Elgg Sites

No items to show

Navigation

Contact

info@elgg.org

Security issues should be reported to security@elgg.org!

Legal

©2014 the Elgg Foundation

Elgg is a registered trademark of Thematic Networks.

Cover image by Raül Utrera is used under Creative Commons license.

Icons by Flaticon and FontAwesome.