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/07/29 17:46:13 UTC
[kafka-site] branch MINOR_add_clickable_links_load_iframe created (now c68fc989)
This is an automated email from the ASF dual-hosted git repository.
bbejeck pushed a change to branch MINOR_add_clickable_links_load_iframe
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
at c68fc989 Add clickable images to load iframe videos
This branch includes the following new commits:
new c68fc989 Add clickable images to load iframe videos
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 clickable images to load iframe videos
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_links_load_iframe
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
commit c68fc989c6781a1c18c124e1348f42cb3e57bb52
Author: Bill Bejeck <bb...@gmail.com>
AuthorDate: Fri Jul 29 13:46:02 2022 -0400
Add clickable images to load iframe videos
---
images/what_is_kafka.png | Bin 0 -> 89371 bytes
intro.html | 19 ++++++++++++++++++-
quickstart.html | 21 ++++++++++++++++++++-
3 files changed, 38 insertions(+), 2 deletions(-)
diff --git a/images/what_is_kafka.png b/images/what_is_kafka.png
new file mode 100644
index 00000000..381fa4ae
Binary files /dev/null and b/images/what_is_kafka.png differ
diff --git a/intro.html b/intro.html
index 8afe7f13..67b443b3 100644
--- a/intro.html
+++ b/intro.html
@@ -1,12 +1,29 @@
<!--#include virtual="/includes/_header.htm" -->
<body class="page-intro ">
<!--#include virtual="/includes/_top.htm" -->
+<script type="text/javascript">
+ function loadVideo () {
+ const videoPlaceholder = document.getElementById("video_placeholder");
+ const 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);
+ }
+</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</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..39559b3d 100644
--- a/quickstart.html
+++ b/quickstart.html
@@ -1,12 +1,31 @@
<!--#include virtual="includes/_header.htm" -->
<body class="page-quickstart ">
<!--#include virtual="includes/_top.htm" -->
+<script type="text/javascript">
+ function loadVideo () {
+ const videoPlaceholder = document.getElementById("video_placeholder");
+ const 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);
+ }
+</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</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>
+
+ <!-- <a href="https://www.youtube.com/embed/FKgi3n-FyNU"> -->
<!-- should always link the latest release's documentation -->
<!--#include virtual="32/quickstart.html" -->
<!--#include virtual="includes/_footer.htm" -->