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/02 14:41:40 UTC
[kafka-site] branch asf-site updated: MINOR: Add clickable images to load iframe videos (#430)
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 b67b506b MINOR: Add clickable images to load iframe videos (#430)
b67b506b is described below
commit b67b506b06e0b357998ef94a03af4efd851d40a0
Author: Bill Bejeck <bb...@gmail.com>
AuthorDate: Tue Aug 2 10:41:36 2022 -0400
MINOR: Add clickable images to load iframe videos (#430)
This PR is a follow-up #427. This PR adds a clickable image that will load an iframe; in line with the ASF privacy policy on embedded YouTube videos. There will be a separate PR performing the same clickable image approach for the Kafka Streams videos.
---
images/what_is_kafka.png | Bin 0 -> 226811 bytes
intro.html | 22 +++++++++++++++++++++-
quickstart.html | 23 ++++++++++++++++++++++-
3 files changed, 43 insertions(+), 2 deletions(-)
diff --git a/images/what_is_kafka.png b/images/what_is_kafka.png
new file mode 100644
index 00000000..6bb761f3
Binary files /dev/null and b/images/what_is_kafka.png differ
diff --git a/intro.html b/intro.html
index 8afe7f13..78cd664e 100644
--- a/intro.html
+++ b/intro.html
@@ -1,12 +1,32 @@
<!--#include virtual="/includes/_header.htm" -->
<body class="page-intro ">
<!--#include virtual="/includes/_top.htm" -->
+<script type="text/javascript">
+ 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', '');
+ videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder);
+ document.getElementById("notification").style.display = 'none';
+ }
+</script>
<div class="content">
<!--#include virtual="/includes/_nav.htm" -->
<div class="right">
<div class="page-header">
<h1 class="page-header-title">Introduction</h1>
- <p class="page-header-text"><a href="https://www.youtube.com/embed/FKgi3n-FyNU">Watch video: Everything you need to know about Kafka in 10 minutes</a></p>
+ <p class="page-header-text">Everything you need to know about Kafka in 10 minutes
+ <span id="notification"> <br/>(clicking the image will load a video from YouTube)</span>
+ </p>
+ <div class="page-header-video">
+ <img id="video_placeholder" width="480" height="270" src="images/what_is_kafka.png" onclick="loadVideo()" style="cursor:pointer"/>
+ </div>
</div>
<!-- should always link the latest release's documentation -->
<!--#include virtual="/32/introduction.html" -->
diff --git a/quickstart.html b/quickstart.html
index c04f1bdf..2d7b8157 100644
--- a/quickstart.html
+++ b/quickstart.html
@@ -1,12 +1,33 @@
<!--#include virtual="includes/_header.htm" -->
<body class="page-quickstart ">
<!--#include virtual="includes/_top.htm" -->
+<script type="text/javascript">
+ 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', '');
+ videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder);
+ document.getElementById('notification').style.display = 'none';
+ }
+</script>
<div class="content">
<!--#include virtual="includes/_nav.htm" -->
<div class="page-header">
<h1 class="page-header-title">Apache Kafka Quickstart</h1>
- <p class="page-header-text">Interested in getting started with Kafka? Follow the instructions in this quickstart, or <a href="https://www.youtube.com/embed/FKgi3n-FyNU">watch the video.</a></p>
+ <p class="page-header-text">Everything you need to know about Kafka in 10 minutes
+ <span id="notification"><br/>(clicking the image will load a video from YouTube)</span>
+ </p>
+ <div class="page-header-video">
+ <img id="video_placeholder" width="480" height="270" src="images/what_is_kafka.png" onclick="loadVideo()" style="cursor:pointer"/>
+ </div>
</div>
+
<!-- should always link the latest release's documentation -->
<!--#include virtual="32/quickstart.html" -->
<!--#include virtual="includes/_footer.htm" -->