MINOR: Update site docs for ASF compliance (#12494)

This PR is a mirror of apache/kafka-site#433 which used placeholder images for the Kafka Streams that users need to click in order to load the iframe with the corresponding video.

Reviewers: Mickael Maison <mimaison@apache.org>

docs/streams/index.html

@@ -16,8 +16,24 @@
   <!--#include virtual="../js/templateData.js" -->
 </script>
 <style>
- .video__item{cursor:pointer;}
+    .video__item{cursor:pointer;}
+    .yt__placeholder{display: none;cursor: pointer;}
+    .third-party{display: none;}
 </style>
+<script type="text/javascript">
+    function loadVideo (divId, code, classToAdd) {
+        var videoPlaceholder = document.getElementById(divId);
+        var iframe = document.createElement('iframe');
+        iframe.src="https://www.youtube.com/embed/"+code;
+        iframe.frameborder="0";
+        iframe.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+        iframe.setAttribute('allowFullScreen', '');
+        iframe.setAttribute('class', 'yt_series yt__placeholder ' + classToAdd);
+        iframe.style="display:block";
+        videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder);
+        document.getElementById(classToAdd+'_warn').remove();
+    }
+</script>
 <script id="streams-template" type="text/x-handlebars-template">
   <h1>Kafka Streams</h1>
     <div class="sub-nav-sticky">
@@ -35,26 +51,61 @@
     </div>
     <h3 class="streams_intro">The easiest way to write mission-critical real-time applications and microservices</h3>
        <p class="streams__description">Kafka Streams is a client library for building applications and microservices, where the input and output data are stored in Kafka clusters. It combines the simplicity of writing and deploying standard Java and Scala applications on the client side with the benefits of Kafka's server-side cluster technology.</p>
-       <hr class="separator">
-       <h3>VIDEO TOUR OF THE STREAMS API</h3>
-       <div class="video__series__grid">
-         <div class="video__block">
-           <div class="video__list">
-               <p class="video__item video_list_1 active">
-                   <span class="video-number">1</span><a href="https://www.youtube.com/embed/Z3JKCLG3VP4"><span class="video__text">Intro to Streams</span></a>
-               </p>
-               <p class="video__item video_list_2 active">
-                   <span class="video-number">2</span><a href="https://www.youtube.com/embed/LxxeXI1mPKo"><span class="video__text">Creating a Streams Application</span></a>
-               </p>
-               <p class="video__item video_list_3 active">
-                   <span class="video-number">3</span><a href="https://www.youtube.com/embed/7JYEEx7SBuE"><span class="video__text">Transforming Data Pt. 1</span></a>
-               </p>
-               <p class="video__item video_list_4 active">
-                   <span class="video-number">4</span><a href="https://www.youtube.com/embed/3kJgYIkAeHs"><span class="video__text">Transforming Data Pt. 2</span></a>
-               </p>
-           </div>
-         </div>
-       </div>
+  <div class="video__series__grid">
+      <div class="yt__video__block">
+          <div class="yt__video__inner__block">
+              <img id="iframe-placeholder-intro"
+                   border="1px"
+                   class="yt__placeholder video_1"
+                   style="display:block"
+                   src="/{{version}}/images/intro_to_streams-iframe-placeholder.png"
+                   onclick="loadVideo('iframe-placeholder-intro', 'Z3JKCLG3VP4?rel=0&showinfo=0&end=602', 'video_1')"/>
+              <span class="third-party" style="display:block" id="video_1_warn">(Clicking the image will load a video from YouTube)</span>
+
+              <img id="iframe-placeholder-creating"
+                   border="1px"
+                   class="yt__placeholder video_2"
+                   src="/{{version}}/images/creating-streams-iframe-placeholder.png"
+                   onclick="loadVideo('iframe-placeholder-creating', 'LxxeXI1mPKo?rel=0&showinfo=0&end=622', 'video_2')"/>
+              <span class="third-party" id="video_2_warn">(Clicking the image will load a video from YouTube)</span>
+
+              <img id="iframe-placeholder-transforming"
+                   border="1px"
+                   class="yt__placeholder video_3"
+                   src="/{{version}}/images/transforming_part_1-iframe-placeholder.png"
+                   onclick="loadVideo('iframe-placeholder-transforming', '7JYEEx7SBuE?rel=0&showinfo=0end=557', 'video_3')"/>
+              <span class="third-party" id="video_3_warn">(Clicking the image will load a video from YouTube)</span>
+
+              <img id="iframe-placeholder-transforming-two" 
+                   border="1px"
+                   class="yt__placeholder video_4"
+                   src="/{{version}}/images/transforming_part_2-iframe-placeholder.png"
+                   onclick="loadVideo('iframe-placeholder-transforming-two', '3kJgYIkAeHs?rel=0&showinfo=0&end=564', 'video_4')"/>
+              <span class="third-party" id="video_4_warn">(Clicking the image will load a video from YouTube)</span>
+          </div>
+      </div>
+      <div class="video__block">
+          <h3>TOUR OF THE STREAMS API</h3>
+          <div class="video__list">
+              <p class="video__item video_list_1 active"
+                 onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt__placeholder').hide();$('.video_1').show(); $('.third-party').hide(); $('#video_1_warn').show()">
+                  <span class="video-number">1</span><span class="video__text">Intro to Streams</span>
+              </p>
+              <p class="video__item video_list_2"
+                 onclick="$('.video__item').removeClass('active'); $(this).addClass('active'); $('.yt__placeholder').hide();$('.video_2').show();  $('.third-party').hide(); $('#video_2_warn').show()">
+                  <span class="video-number">2</span><span class="video__text">Creating a Streams Application</span>
+              </p>
+              <p class="video__item video_list_3"
+                 onclick="$('.video__item').removeClass('active'); $(this).addClass('active'); $('.yt__placeholder').hide();$('.video_3').show();  $('.third-party').hide(); $('#video_3_warn').show()">
+                  <span class="video-number">3</span><span class="video__text">Transforming Data Pt. 1</span>
+              </p>
+              <p class="video__item video_list_4"
+                 onclick="$('.video__item').removeClass('active'); $(this).addClass('active'); $('.yt__placeholder').hide();$('.video_4').show();  $('.third-party').hide(); $('#video_4_warn').show()">
+                  <span class="video-number">4</span><span class="video__text">Transforming Data Pt. 2</span>
+              </p>
+          </div>
+      </div>
+  </div>
        <hr class="separator">
        <div class="use-item-section">
            <div class="use__list__sec">