Embed video with replacement on click

embed_video.html.twig

<div class="embed-video">
  <div class="embed-video__thumbnail">
    {{ thumbnail }}
    <button class="embed-video__button">
      <span class="visually-hidden">{% trans %}Play{% endtrans %}</span>
      <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
    </button>
  </div>
  <div class="embed-video__video">
    <!--
    {{ video }}
    -->
  </div>
</div>

embed_video.js

((Drupal, document) => {

  /**
   * Read HTML comments inside an element.
   */
  function getAllComments(rootElem) {
    var comments = [];
    // Fourth argument, which is actually obsolete according to the DOM4 standard, is required in IE 11
    var iterator = document.createNodeIterator(rootElem, NodeFilter.SHOW_COMMENT, () => NodeFilter.FILTER_ACCEPT, false);
    var curNode;
    while (curNode = iterator.nextNode()) {
      comments.push(curNode.nodeValue);
    }
    return comments;
  }

  /**
   * Embed video iframe code is in an HTML comment for performances reasons.
   *
   * On click, the thumbnail is swapped with the iframe.
   */
  Drupal.behaviors.EmbedVideo = {
    attach: (context, settings) => {
      context.querySelectorAll('.embed-video').forEach((item) => {
        item.addEventListener('click', (evt) => {
          const target = evt.currentTarget;
          const wrapper = target.querySelector('.embed-video__video');

          // Replace the div content by the comment content.
          wrapper.innerHTML = getAllComments(wrapper);

          // Calculate the video ratio and set autoplay.
          const iframe = wrapper.querySelector('iframe')
          if (iframe && iframe.hasAttribute('width') && iframe.hasAttribute('height')) {
            let ratio = (iframe.getAttribute('height') * 100) / iframe.getAttribute('width');
            ratio = Math.round((ratio + Number.EPSILON) * 100) / 100;
            wrapper.setAttribute('style', `--ratio: ${ratio}%;`);

            iframe.setAttribute('src', iframe.getAttribute('src') + '&autoplay=1');
          }

          // Swap medias.
          target.classList.add('embed-video--swapped');
        })
      });
    }
  }

})(Drupal, document);