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:03 UTC
[kafka-site] branch MINOR_add_clickable_images_streams_videos created (now ff7b6180)
This is an automated email from the ASF dual-hosted git repository.
bbejeck pushed a change to branch MINOR_add_clickable_images_streams_videos
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
at ff7b6180 Add placeholder images that will load iframe. This is done for ASF privacy rules
This branch includes the following new commits:
new ff7b6180 Add placeholder images that will load iframe. This is done for ASF privacy rules
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[kafka-site] 01/01: Add placeholder images that will load iframe. This is done for ASF privacy rules
Posted by bb...@apache.org.
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';
}