You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kafka.apache.org by bb...@apache.org on 2022/08/03 21:22:04 UTC
[kafka-site] 01/01: Add placeholder images that will load iframe. This is done for ASF privacy rules
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 <bb...@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';
}