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

Converts URLs surrounded by newlines into embeds that are loaded asynchronously

<p>Hey this another photo:</p>
<a
  href="http://www.23hq.com/mprove/photo/66422006"
  class="remark-oembed-anchor"
  data-oembed
  rel="noopener noreferrer nofollow"
  target="_blank"
  ><img
    src="http://www.23hq.com/9484736/66422006_0e82f5775b3b15207f50f5af5a625652_large.jpg"
    data-src="http://www.23hq.com/9484736/66422006_0e82f5775b3b15207f50f5af5a625652_large.jpg"
    title="Hamburg. Uhlenhorst. Das F&#x26;auml;hrhaus (33)"
    width="756"
    height="495"
    class="remark-oembed-photo"
    data-oembed
/></a>
<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>