CKEDITOR5 how to insert youtube video

Question

I'm using CKEDITOR 5 on react with the document toolbar.

When I insert a youtube video with the Media embed icon, I can see the youtube video correctly with because the html contain an iframe but when I save it, the html become like this:

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

In the ckeditor it says

Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service.

So i should have iframe tag but it doesn't.

Any idea?

Answer 1

I had the same problem. I got oembed string from CKEDITOR. I solved this problem using this config:

editorConfig = {
    toolbar: [....],
    mediaEmbed: {
        previewsInData: true
    }
}

In this case CKEDITOR returns not oembed string but iframe. Just save it and show it as it is. See https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#semantic-data-output-default

Answer 2

I started working with reactjs and I am using ckeditor5. Right now the problem still exists. I couldn't find any solution, but I created my own, I hope it helps you.

//'embed' code gotten from ckeditor
 const embed =
'<figure class="media"><oembed url="https://www.youtube.com/watch?v=N1t6X4p6Q74"></oembed></figure><p>cdcdcd</p><figure class="media"><oembed url="https://www.youtube.com/watch?v=N1t6X4p6Q74"></oembed></figure>';

  const stringToHTML = function(str) {
   const domContainer = document.createElement("span");
   domContainer.innerHTML = str;
   return domContainer;
  };

  const parentEmbed = stringToHTML(embed);


 let oldIframe = parentEmbed.querySelectorAll("oembed");
 oldIframe = Array.from(oldIframe);

    for (const i in oldIframe) {
     //Get the url from oembed tag
     let url = oldIframe[i].getAttribute("url");
     //Replace 'watch?v' with 'embed/'
    url = url.replace("watch?v=", "embed/");

    //Create a iframe tag
    const newIframe = document.createElement("iframe");
    newIframe.setAttribute("width", "auto");
    newIframe.setAttribute("height", "auto");
    newIframe.setAttribute("allowFullScreen", "");
    newIframe.setAttribute("frameBorder", 0);
    if (url) {
     newIframe.setAttribute("src", url);
    }
    // replace oldIframe with newIframe
    oldIframe[i].parentNode.replaceChild(newIframe, oldIframe[i]);
   }

   const contentToRender = parentEmbed.outerHTML;
    
   return (
    <div
      key={contentToRender}
      dangerouslySetInnerHTML={{ __html: contentToRender }}
    />
   );

you can optimize the code, but that's the idea

//ckeditor content Ckeditor

//Result Content