This is an automated email from the ASF dual-hosted git repository. bbejeck pushed a commit to branch MINOR_add_clickable_images_streams_videos in repository https://gitbox.apache.org/repos/asf/kafka-site.git
commit ff7b61808b60384ad746abcf541a2e7ac73dfdef Author: Bill Bejeck <bbej...@gmail.com> AuthorDate: Wed Aug 3 17:21:55 2022 -0400 Add placeholder images that will load iframe. This is done for ASF privacy rules --- 32/images/creating-streams-iframe-placeholder.png | Bin 0 -> 23407 bytes 32/images/intro_to_streams-iframe-placeholder.png | Bin 0 -> 17548 bytes .../transforming_part_1-iframe-placeholder.png | Bin 0 -> 20147 bytes .../transforming_part_2-iframe-placeholder.png | Bin 0 -> 19286 bytes 32/streams/index.html | 64 ++++++++++++++++++--- intro.html | 2 +- quickstart.html | 1 + 7 files changed, 58 insertions(+), 9 deletions(-) diff --git a/32/images/creating-streams-iframe-placeholder.png b/32/images/creating-streams-iframe-placeholder.png new file mode 100644 index 00000000..f3eafd20 Binary files /dev/null and b/32/images/creating-streams-iframe-placeholder.png differ diff --git a/32/images/intro_to_streams-iframe-placeholder.png b/32/images/intro_to_streams-iframe-placeholder.png new file mode 100644 index 00000000..569d61e6 Binary files /dev/null and b/32/images/intro_to_streams-iframe-placeholder.png differ diff --git a/32/images/transforming_part_1-iframe-placeholder.png b/32/images/transforming_part_1-iframe-placeholder.png new file mode 100644 index 00000000..9c525288 Binary files /dev/null and b/32/images/transforming_part_1-iframe-placeholder.png differ diff --git a/32/images/transforming_part_2-iframe-placeholder.png b/32/images/transforming_part_2-iframe-placeholder.png new file mode 100644 index 00000000..bb9e5db3 Binary files /dev/null and b/32/images/transforming_part_2-iframe-placeholder.png differ diff --git a/32/streams/index.html b/32/streams/index.html index c24af4c2..895d57e7 100644 --- a/32/streams/index.html +++ b/32/streams/index.html @@ -17,7 +17,25 @@ </script> <style> .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.width="480"; + iframe.height="270"; + iframe.src="https://www.youtube.com/embed/"+code+"?modestbranding=1"; + iframe.frameborder="0"; + iframe.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"; + iframe.setAttribute('allowFullScreen', ''); + iframe.setAttribute('class', 'youtube-embed page-header-video-embed 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"> @@ -39,18 +57,48 @@ <h3>VIDEO TOUR OF THE STREAMS API</h3> <div class="video__series__grid"> <div class="video__block"> + <div id="inner_placeholder_block"> + <img id="iframe-placeholder-intro" width="480" height="270" + 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', '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" width="480" height="270" + border="1px" + class="yt__placeholder video_2" + src="/{{version}}/images/creating-streams-iframe-placeholder.png" + onclick="loadVideo('iframe-placeholder-creating', 'LxxeXI1mPKo', '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" width="480" height="270" + border="1px" + class="yt__placeholder video_3" + src="/{{version}}/images/transforming_part_1-iframe-placeholder.png" + onclick="loadVideo('iframe-placeholder-transforming', '7JYEEx7SBuE', '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" width="480" height="270" + border="1px" + class="yt__placeholder video_4" + src="/{{version}}/images/transforming_part_2-iframe-placeholder.png" + onclick="loadVideo('iframe-placeholder-transforming-two', '3kJgYIkAeHs', 'video_4')" /> + <span class="third-party" id="video_4_warn">(Clicking the image will load a video from YouTube)</span> + </div> <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 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 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 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 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 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 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 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> diff --git a/intro.html b/intro.html index 78cd664e..9edc0677 100644 --- a/intro.html +++ b/intro.html @@ -5,13 +5,13 @@ function loadVideo () { var videoPlaceholder = document.getElementById("video_placeholder"); var iframe = document.createElement('iframe'); - iframe.class="youtube-embed page-header-video-embed"; iframe.width="480"; iframe.height="270"; iframe.src="https://www.youtube.com/embed/FKgi3n-FyNU?modestbranding=1"; iframe.frameborder="0"; iframe.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"; iframe.setAttribute('allowFullScreen', ''); + iframe.setAttribute('class','youtube-embed page-header-video-embed'); videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder); document.getElementById("notification").style.display = 'none'; } diff --git a/quickstart.html b/quickstart.html index 2d7b8157..183cf97a 100644 --- a/quickstart.html +++ b/quickstart.html @@ -12,6 +12,7 @@ iframe.frameborder="0"; iframe.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"; iframe.setAttribute('allowFullScreen', ''); + iframe.setAttribute('class','youtube-embed page-header-video-embed'); videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder); document.getElementById('notification').style.display = 'none'; }