Why figure and oembed tags are not working?

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&amp;list=RDQK-Z1K67uaA&amp;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&amp;list=RDQK-Z1K67uaA&amp;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

Solution

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>';