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 <bbej...@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" -->