Menu
Given the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
Why the page is not showing the youtube video?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>The body code was generated by CKEditor (I just removed the class "media" from the figure tag). You can see my original post here link
531
Solution tested for CKeditor 5
Save the exact view showing in CKeditor into DB use the below code
mediaEmbed: {
previewsInData:true
},
Full JS Code
var KTCkeditorDocument = function () {
// Private functions
var demo = function () {
ClassicEditor
.create( document.querySelector( '#kt-editor' ),{
mediaEmbed: {
previewsInData:true
},
}
)
.then( editor => {
// console.log( editor );
} )
.catch( error => {
// console.error( error );
Swal.fire("Info !", error, "error");
} );
}
return {
// public functions
init: function() {
demo();
}
};
}();
jQuery(document).ready(function() {
KTCkeditorDocument.init();
});
For more details you can check this link: https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html
114
The figure and oembed tags are not going to work to show a preview. In order to make it work I had to convert the youtube links to embeddable links and add them with an iframe.
To do so I used the solution proposed in this thread: link
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
var videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo');
var iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/'
+ videoId + '" frameborder="0" allowfullscreen></iframe>';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With