This is an automated email from the ASF dual-hosted git repository.
bbejeck pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
The following commit(s) were added to refs/heads/asf-site by this push:
new bb60ede1 MINOR: Add placeholder images that will load iframe. (#433)
bb60ede1 is described below
commit bb60ede1cc0de02ccfe8ef840a9765814d880ff8
Author: Bill Bejeck <[email protected]>
AuthorDate: Fri Aug 5 17:20:27 2022 -0400
MINOR: Add placeholder images that will load iframe. (#433)
* Add placeholder images that will load iframe. This is done for ASF
privacy rules
* Updates per comments
---
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 | 69 +++++++++++++++++----
intro.html | 2 +-
quickstart.html | 1 +
7 files changed, 60 insertions(+), 12 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..201f6aff 100644
--- a/32/streams/index.html
+++ b/32/streams/index.html
@@ -17,7 +17,23 @@
</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.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,22 +51,53 @@
</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="yt__video__block">
+ <div class="yt__video__inner__block">
+ <img id="iframe-placeholder-intro" width="600" height="325"
+ 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" width="600" height="325"
+ 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" width="600"
height="325"
+ 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" width="600"
height="325"
+ 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">
- <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';
}
