Created on 30 January 2017, over 8 years ago
Updated 1 July 2025, about 2 months ago

We're considering to replace MediaElement with Plyr for Paddle → , the Drupal distribution for the Flemish Government. The Plyr looks promising, but in a WYSIWYG lik CKEditor a YouTube video shows as an empty div while we would like it to look as a video.

✨ Feature request
Status

Active

Version

1.0

Component

User interface

Created by

🇧🇪Belgium PieterDC Ghent

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇧🇷Brazil andre.bonon

    This feature request is still relevant. I’ve re-targeted the issue to the 8.x-1.x-dev branch.
    I plan to submit a merge request with the feature in my next contribution.

  • Pipeline finished with Success
    about 2 months ago
    Total: 210s
    #536493
  • 🇧🇷Brazil andre.bonon

    Adding the patch file that could be used with composer.

  • 🇧🇷Brazil andre.bonon

    Flagging for Needs review.

  • 🇧🇷Brazil andre.bonon

    Test steps

    1. Enable Required Modules
      Ensure the following modules are enabled:
      • - Media
      • - Media Library
      • - CKEditor
      • - Plyr
    2. Configure the Media Type
      • - Go to Structure > Media types > Remote video > Manage display.
      • - For the Default display mode, set the Video URL field (or equivalent) to use the Plyr formatter.
      • - Save the configuration.
    3. Configure Text Format for CKEditor
      • - Go to Configuration > Content authoring > Text formats and editors.
      • - Edit the text format used by your content type (e.g., Full HTML or Basic HTML).
      • - Under Enabled filters, ensure the Embed media is enabled
      • - Under Editor settings, make sure the Insert media button is added to the CKEditor toolbar.
      • - Save the configuration.
    4. Test Embedding a Remote Video via CKEditor
      • - Go to Content > Add content and select a content type that includes a Body field (e.g., Article).
      • -In the Body field, verify that the Insert media icon is visible in the CKEditor toolbar.
      • - Click the Insert media icon.
      • - In the media library modal, select an existing Remote video media item or create a new one using a valid YouTube or Vimeo URL.
      • - Insert the media into the editor.
      • - Verify that the video preview is rendered inline within the CKEditor (not just a placeholder).
      • - Save the content.
      • - On the front-end, confirm that the video is rendered using the Plyr player
    5. Test Embedding a Remote Video via CKEditor inside Layout Builder Modal
      • - Ensure that Layout Builder and Layout Builder Modal are enabled
      • - Go to Structure > Content types > [Your Content Type] > Manage display.
      • - Enable Layout Builder for the content type. Enable the "Allow each content item to have its layout customized" option.
      • - Create or edit a node of that content type and click Layout
      • - In the Layout Builder interface, click Add block and choose a Basic block that contains a Body field using CKEditor.
      • - In the Layout Builder Modal that opens, locate the Body field and ensure the Insert media icon is present in the CKEditor toolbar.
      • - Click the Insert media icon.
      • - Select an existing Remote video media item or create a new one using a valid YouTube or Vimeo URL via the media library modal.
      • - Insert the media item into the editor.
      • - Verify that the video preview is rendered inline within the CKEditor (not as a token or placeholder).
      • - Click Update and then Save Layout.
      • - View the node and confirm that the video is rendered using the Plyr player as expected.
Production build 0.71.5 2024