search

hvlads / django-ckeditor-5

Django CKEditor 5 integration.
Other
145 stars 60 forks source link

Media embed feature produces output that does not contain previews of embedded media #67

Closed jsolly closed 2 years ago

jsolly commented 2 years ago

Context

I want to show a Youtube video inside a blog post. It works great while editing, but as soon as I view the post on my website, I no longer see the media preview.

Video Shows on the admin page image

Nothing shows in viewing mode. It appears that the elements are there, but they don't render image

Steps to reproduce

1 - Copy a link to a Youtube video (such as https://www.youtube.com/watch?v=C5M2cy80LxE ) 2 - Paste this link into the editing area or using the 'Media Embed' tool within ckeditor 5 3 - Video preview shows as expected in the editor 4 - View the content outside the editor (like a user would) No preview is shown

Research

I found this SO thread that suggests adding "previewsInData": "true" to the config, but this didn't work for me. 

mediaEmbed: {
    previewsInData:true
},

According to the Ckeditor 5 docs

By default, the media embed feature produces output that does not contain previews of embedded media, called the semantic output. This means that you need to transform the output elements into real media on your target website.

There are many ways to do that. The simplest, plug-and-play solutions are described here. You can also implement this transformation as part of your back-end service or you can use different services than described in this section.

The docs then go into various ways to accomplish this, one being adding Iframely.

Ideal behavior

Media embeds (such as Youtube videos) render in viewing mode.

jsolly commented 2 years ago

Woops. I must have done something wrong because I just tried again and it worked. I added

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

and it worked image