CKEditor 5 video embed is not displayed on the presentation page

Question

I know that this has been asked many times, but I open this discussion to solve my problem and to summarize all we know about this topic to help people in the future.

So, let's go. We want to upload a video (e.g. from YouTube). We can do this pasting the video url or using the MediaEmbed button.

We have two possibility.

We can set or not in our editorConfig

mediaEmbed: { previewsInData: true }

WITHOUT previewsInData: true we obtain something like this:

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

Instead WITH previewsInData: true we obtain something like this

<figure class="media">
  <div data-oembed-url="https://www.youtube.com/watch?v=vsl3gBVO2k4&amp;ab_channel=H%C3%A9lderPalma">
    <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">
      <iframe src="https://www.youtube.com/embed/vsl3gBVO2k4" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
      </iframe>
    </div>
  </div>
</figure>

In both cases i'm able to see the preview of the youtube video in my CKEditor. But when I save the content of the editor and I get that to display it in my presentation page the video is not displayed.

Reading the other discussions here on the forum I couldn't figure out if this is just my problem or not. Many solutions concerning adding previewsInData: true in editorConfig, but for me absolutely nothing changes.

I think that the tag figure and the oembed div is useful to CKEditor to display a preview of the video. We know that this preview is like a picture, you can't play the video, you can't open in a new page, etc. This is ok, but i want to see the video in my presentation page.

So, where is the problem?

1. Is there something to change on the presentation page to have the video displayed?
2. Should I search for the figure tag and replace it with an iframe server side?
3. Any ideas?

I hope we can find a permanent solution to this problem.

Answer 1

You should indeed use a 'frontend' to display the oembed tags, like it says in the manual on : https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#displaying-embedded-media-on-your-website

You can provide your own mediaprovider using this :

        ClassicEditor
        .create( editorElement, {
            plugins: [ MediaEmbed, ... ],
            mediaEmbed: {
                extraProviders: [
                    {
                         name: 'extraProvider',
                         url: /^example\.com\/media\/(\w+)/,
                         html: match => '...'
                    },
                    ...
                ]
            }
        } )
    .then( ... )
    .catch( ... );

and the html could be something like :

...
html: match =>
    '<div style="position:relative; padding-bottom:100%; height:0">' +
        '<iframe src="..." frameborder="0" ' +
            'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
        '</iframe>' +
    '</div>'

you can find more in de docs, here :

https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedProvider.html

you could also do something like this yourself, avoiding external oembed providers:

window.addEventListener('load', function(){
    document.querySelectorAll('oembed[url]').forEach( element => {
        // get just the code for this youtube video from the url
        let vCode = element.attributes.url.value.split('?v=')[1];
        // paste some BS5 embed code in place of the Figure tag
    element.parentElement.outerHTML= `
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/${vCode}?rel=0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>`;
    });
})

You would ofcourse have to upgrade the script for all different versions of embedded content, this example will just work for youtube. You would have to analyze the URL from the oembed tag to check what is embedded so you can add the right code for each variant.

Answer 2

You can show the iframe manually, actually it's just "a stupid way" and easiest way, first use previewsInData: true to automatically create the iframe, then you just need to styling it, for example

on javascript

document.querySelectorAll( 'div[data-oembed-url]' ).forEach( element => {
    $(element).addClass( "parent_container_iframe");

    let child = element.firstChild;
    $(child).addClass( "video_container_iframe");

    let iframe = child.firstChild;
    $(iframe).addClass( "video_iframe");
} );

and on css

.parent_container_iframe{
    width: 100%;
}

.video_container_iframe {
    height: auto !important;
    padding-bottom: 0 !important;
}

.video_iframe {
    position: relative !important;
    min-height: 50vh;
}