remark-oembed/test/outputs/defaults-rich-oembed.html

Converts URLs surrounded by newlines into embeds that are loaded asynchronously

<p>Hey this is a nice youtube video:</p>
<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
  <a
    href="https://www.youtube.com/watch?v=aoLhACqJCUg"
    class="remark-oembed-anchor"
    data-oembed
    rel="noopener noreferrer nofollow"
    target="_blank"
    ><img
      src="https://i.ytimg.com/vi/aoLhACqJCUg/hqdefault.jpg"
      title="Há Música na Cidade 2015"
      width="200"
      height="113"
      class="remark-oembed-photo"
      data-oembed /></a
  ><template data-oembed-template
    ><iframe
      width="200"
      height="113"
      src="https://www.youtube.com/embed/aoLhACqJCUg?feature=oembed"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe
  ></template>
</div>
<p>Check it out 👆</p>
<script async defer>
  const isDocumentReady = () => {
    if (document.readyState !== 'complete') {
      document.addEventListener('readystatechange', isDocumentReady);
      return false;
    }

    requestAnimationFrame(() => {
      document.querySelectorAll('div[data-oembed]').forEach((el) => {
        const template = el
          .querySelector('[data-oembed-template]')
          .content.cloneNode(true);
        el.innerHTML = '';
        el.attachShadow({ mode: 'closed' }).appendChild(template);
      });

      document.querySelectorAll('img[data-oembed][data-src]').forEach((img) => {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.removeAttribute('data-src');
      });

      document.querySelectorAll('[data-oembed]').forEach((el) => {
        el.removeAttribute('data-oembed');
      });
    });

    return true;
  };

  if (!isDocumentReady()) {
    document.addEventListener('readystatechange', isDocumentReady);
  }
</script>