为什么 figure 和 oembed 标签不起作用？

Question

给出以下 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&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
  </figure>

</body>

</html>

为什么页面没有显示 YouTube 视频？

    <!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&amp;list=RDQK-Z1K67uaA&amp;index=9"></oembed>
      </figure>
    
    </body>
    
    </html>

主体代码由CKEditor生成（我刚刚从figure标签中删除了class"media"）。你可以在这里看到我的原创 post link

Answer 1

图形和 oembed 标签无法显示预览。为了使其正常工作，我必须将 youtube 链接转换为可嵌入链接并使用 iframe 添加它们。

为此，我使用了此线程中提出的解决方案：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>';

Answer 2

针对 CKeditor 5

测试的解决方案

使用以下代码将 CKeditor 中显示的确切视图保存到数据库中

mediaEmbed: {
    previewsInData:true
},

完整的 JS 代码

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();
});

有关详细信息，您可以查看此 link：https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html

为什么 figure 和 oembed 标签不起作用？

Why figure and oembed tags are not working?

html

figure

ckeditor

oembed