I am creating a lesson editor. The user can edit the content (text, videos, links, images etc) or view the final result (the rendered html).

The editor works fine, but when I show the rendered html the linked youtube videos are not visible.

This is the editor part, as you can see the video linked is visible:

And this is the 'rendered' version; the video is missing (it looks like it's not rendering the figure tag and the oembed tag, but why?):

The html is:

<h2>This is the header of this section</h2>
<figure class="media">
<oembed url=";amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
</figure>

<p>Please let the student introduce himself.</p><blockquote><p>&nbsp; ‘I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. […]<br>‘Hi, Richard,’ she said, and spit out a mouthful of toothpaste. She was wearing cut-off jeans that had bizarre, frantic designs drawn on them in Magic Marker and a spandex top which revealed her intensely aerobicized midriff.<br>‘Hello,’ I said, setting to work on my tie.<br>‘You look cute today.’<br>‘Thanks.’<br>‘Got a date?’<br>I looked away from the mirror, at her. ‘What?’<br>‘Where you going?’<br>By now I was used to her interrogations.’ (pp. 51-52)</p></blockquote>

<figure class="media">
<oembed url=";amp;list=RDQK-Z1K67uaA&amp;index=9">
</oembed>
</figure>

I am creating a lesson editor. The user can edit the content (text, videos, links, images etc) or view the final result (the rendered html).

The editor works fine, but when I show the rendered html the linked youtube videos are not visible.

This is the editor part, as you can see the video linked is visible:

And this is the 'rendered' version; the video is missing (it looks like it's not rendering the figure tag and the oembed tag, but why?):

The html is:

<h2>This is the header of this section</h2>
<figure class="media">
<oembed url="https://www.youtube./watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
</figure>

<p>Please let the student introduce himself.</p><blockquote><p>&nbsp; ‘I was in no mood for talk and I was unpleasantly surprised to find Judy Poovey brushing her teeth at the sink. […]<br>‘Hi, Richard,’ she said, and spit out a mouthful of toothpaste. She was wearing cut-off jeans that had bizarre, frantic designs drawn on them in Magic Marker and a spandex top which revealed her intensely aerobicized midriff.<br>‘Hello,’ I said, setting to work on my tie.<br>‘You look cute today.’<br>‘Thanks.’<br>‘Got a date?’<br>I looked away from the mirror, at her. ‘What?’<br>‘Where you going?’<br>By now I was used to her interrogations.’ (pp. 51-52)</p></blockquote>

<figure class="media">
<oembed url="https://www.youtube./watch?v=7km4EHgkQiw&amp;list=RDQK-Z1K67uaA&amp;index=9">
</oembed>
</figure>

• javascript
• html
• reactjs
• ckeditor5

• Read this ckeditor./docs/ckeditor5/latest/features/… – Jaspreet Singh Commented Aug 11, 2019 at 12:10

1 Answer 1

You need to update your CKEditor configuration for the Media embed plugin. By setting previewsInData to true the produced HTML is functionally equivalent to what you see in the CKEditor at design time.

Include the following line in the configuration.

mediaEmbed: {previewsInData: true}

If this is not what you are looking for then you need to transform the output either server side or client side as the produced HTML from CKEditor only produces semantic output. The CKEditor documentation remends using a tools including Iframely or Embedly to do this but you can do it any way you wish.