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:14 UTC
[kafka-site] 01/01: Add clickable images to load iframe videos
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" -->