render

in _plugins/youtube.rb [24:63]


    def render(context)
      video_id, image_url = @text.split(' ')
      <<~HTML
        <div class="youtube-placeholder yt-container-#{video_id}" style="cursor: pointer;">
          <img src="#{image_url}" alt="Video thumbnail">
        </div>
        <div class="youtube-placeholder-description">
          Clicking on this image will load the video and send data from and to YouTube/Google.
        </div>
        <style>
          .youtube-placeholder {
            width: 560px; 
            height: auto;
          }
          .youtube-placeholder-description {
            color: gray;
            font-style: italic;
          }
        </style>
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var container = document.querySelector('.yt-container-#{video_id}');
            function addElement() {
              var iframe = document.createElement('iframe');
              iframe.setAttribute('width', '560');
              iframe.setAttribute('height', '315');
              iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/#{video_id}?autoplay=1');
              iframe.setAttribute('title', 'YouTube video player');
              iframe.setAttribute('frameborder', '0');
              iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
              iframe.setAttribute('allowfullscreen', '');
              container.innerHTML = '';
              container.appendChild(iframe);
            }
            container.addEventListener('click', addElement);
          });
        </script>
      HTML
    end