Media Embed Videos not display - laravel-8

Question

I installed ckeditor5 & mediaembed on Laravel 8
If you actually put a YouTube link, the preview will be activated.
Here is ckeditor.js
ClassicEditor.defaultConfig = {
extraPlugins: [ ImageResize ],
toolbar: {
items: [
......
]
},
image: {
toolbar: [
....
],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'ko',
mediaEmbed: {
// configuration...
previewsInData: true
}
};
After entering the YouTube link and completing the post,
In fact, when the post is opened, the code below appears and the video is not visible.
<figure class="media"><oembed url="https://www.youtube.com/watch?v=4lA57PRYxhI"></oembed></figure>
I've read the documentation several times but I can't figure out what I'm doing wrong.
I also want to add a Provider
I'm writing the code as below, and I'm wondering if this is the right approach to do it?
mediaEmbed: {
previewsInData: true,
removeProviders: ['youtube'],
providers: [
{
name: 'youtube',
url: [
/^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)/,
/^(?:m\.)?youtube\.com\/v\/([\w-]+)/,
/^youtube\.com\/embed\/([\w-]+)/,
/^youtu\.be\/([\w-]+)/
],
html: match => {
const id = match[ 1 ];
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
`<iframe src="https://www.youtube.com/embed/${ id }" ` +
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
'</iframe>' +
'</div>'
);
}
},
{
name: 'afreecaTV',
url: [
/^v\.afree\.ca\/ST\/([\w-]+)/,
/^vod\.afreecatv\.com\/([\w-]+)/,
/^play\.afreecatv\.com\/([\w-]+)/,
],
html: match => {
const id = match[ 1 ];
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
`<iframe src="https://openapi.afreecatv.com/oembed/embedinfo/${ id }" ` +
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
'</iframe>' +
'</div>'
);
}
},
]
}
$(document).ready(function () {
// $(document).load(function () {
//adjust modal body sizes
document.querySelectorAll( 'oembed' ).forEach( element => {
// console.log(element);
// console.log(element.firstChild);
// Discard the static media preview from the database (empty the <div data-oembed-url="...">).
while ( element.firstChild ) {
element.removeChild( element.firstChild );
}
// Generate the media preview using Iframely.
iframely.load( element, element.dataset.oembedUrl ) ;
} );
});
So we want to help.
When I open a post, I want to show the video
When adding ExtraProvider, is it correct to do as above?