CKEDITOR 5 Embedly?

Question

[junioract]

Привет знатокам ! Установил ckeditor5 через cdn , дошел вопрос до того что когда вставляют видео с ютуба оно не отображается на выходе выводится так

<figure class="media"><oembed url="https://www.youtube.com/watch?"></oembed></figure>

а не как обычный iframe
---- Нашел в документации плагин Media Embed
Попытался установить npm install --save @ckeditor/ckeditor5-media-embed
использую WHM + cpanel
и далее

import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';

Но ничего не работает или я не так чтото делаю ? возможно ли вообще убрать oembed чтобы просто был Iframe?

Comments

[Александр]

Привет, я столкнулся с аналогичной проблемой)) решил вопрос?

[anelfer]

Александр, Привет)) та же проблема, решил?

[Erl]

есть новости?)

[Erl]

AlexOneTrek , Александр
есть решение?)

[anelfer]

Erl, привет, если честно не помню. Но по-моему, я как-то решил эту проблему

Answer 1

[aismagulov]

Answer 2

[Павел Беляев]

https://www.youtube.com/watch?v=Dn5oViFUVF8

Answer 3

[Роман Кофф]

Если еще актуально...

Если добавить опцию previewsInData: true, то на выходе будет отдаваться не обертка oembed, а iframe, который настроен для самого CKE.

А вообще, они спецом так сделали и рекомендуют на стороне клиента преобразовывать oembed в нужный код дополнительным решением (например Iframely или Embedly или самописным). В принципе это логично, но сложно (или платно).

Ну, как бы, здесь все написано: https://ckeditor.com/docs/ckeditor5/latest/feature...

mediaEmbed: {
    previewsInData: true,
    providers: [
        {
            /*
            https://youtu.be/IlxSbtP2SNg
            <iframe src="https://www.youtube.com/embed/IlxSbtP2SNg" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            */
            name: 'youtube',
            url: /^youtu\.be\/([\w-]+)?/,
            html: match =>
                `<iframe src="https://www.youtube.com/embed/${match[1]}" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
        },
    ]
},