Parse embeds is not replacing the <oembed> tag on the front end

[anita-chouhan]

Description

We have a CKEditor body field in a project that allows authors to embed videos. We have kept the Parse embeds option enabled for the field. The YouTube embedded videos are showing fine in the control panel, but the <oembed> tag is not getting replaced with the provider’s embed code for the front end.

Steps to reproduce

1. Add a CKEditor field with the option to embed videos.
2. Enable the Parse embeds option in the field.
3. Disable the Purify HTML option.
4. Use this field on an entry and add content.

Additional info

• Craft version: 5.10.1
• PHP version: 8.2.31
• Database driver & version: MySQL 8.0.46
• CKEditor version: 5.6.1

CKEditor field toolbar

CKEditor field config options

{
  "code": {
    "indentSequence": "  "
  },
  "htmlSupport": {
    "allow": [
      {
        "attributes": true,
        "classes": true
      }
    ]
  },
  "image": {
    "toolbar": [
      "imageStyle:alignLeft",
      "imageStyle:alignRight",
      "imageStyle:alignCenter",
      "ImageResize:true",
      "toggleImageCaption"
    ]
  },
  "link": {
    "decorators": {
      "openInNewTab": {
        "attributes": {
          "target": "_blank"
        },
        "label": "Open in a new tab",
        "mode": "manual"
      }
    },
    "defaultProtocol": "http:\/\/"
  },
  "list": {
    "properties": {
      "reversed": false,
      "startIndex": true,
      "styles": false
    }
  },
  "style": {
    "definitions": [
      {
        "classes": [
          "pull-quote"
        ],
        "element": "blockquote",
        "name": "Pull Quote"
      },
      {
        "classes": [
          "prose-buttons-parent"
        ],
        "element": "p",
        "name": "Button"
      }
    ]
  }
}

Note

If we enable previewsInData in the CKEditor config, then the <oEmbed> tags are replaced with an iframe in the frontend on updating content.

 {
    "mediaEmbed": {
      "previewsInData": true
    }
}

[linear-code]

PT-3152

[i-just]

Hi, thanks for getting in touch! I’m not able to reproduce this. Could you please share the URL you’re using to embed a YouTube video that displays this behaviour?

[anita-chouhan]

Hello @i-just, we encountered this issue on a Craft CMS site where we were initially using the Redactor plugin before migrating to CKEditor. Redactor rendered the embedded YouTube video using an iframe, whereas CKEditor displays it using an oembed tag on the frontend. We enabled the "Parse embeds" option for the field and resaved the entry, but that did not resolve the issue.

[i-just]

Thanks for the extra info! The fact that the field started out as a Redactor one was the key here - I can reproduce what you’re seeing. Here’s what’s going on:

With Redactor, embedded videos were stored as an iframe with the URL set to www.youtube.com/embed/<id>

During conversion to CKEditor, the content isn’t changed. However, once that’s done and you edit the content of that field and save, the video gets normalised to the value that CKEditor prefers. If, at that point, you have mediaEmbed.previewsInData set to true in the config, the video will use different markup; otherwise, it’ll use the default, which is oembed. (There’s a bit more info on this here: #100.)

Now, because the video was added back when the field was a Redactor one, the URL follows the youtube.com/embed/<id> format. That’s not a problem if the mediaEmbed.previewsInData is on, but if it’s off and the “Parse embeds” feature kicks in, the embed library used by it cannot turn it into an iframe with embed URL.

I think the best way forward here is to ensure mediaEmbed.previewsInData is set to true in the field config.

I hope this helps! I’ll close this now, but feel free to reach out if you run into any further problems.