Updates per comments
diff --git a/32/streams/index.html b/32/streams/index.html
index 895d57e..201f6af 100644
--- a/32/streams/index.html
+++ b/32/streams/index.html
@@ -24,13 +24,11 @@
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.src="https://www.youtube.com/embed/"+code;
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.setAttribute('class', 'yt_series yt__placeholder ' + classToAdd);
iframe.style="display:block";
videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder);
document.getElementById(classToAdd+'_warn').remove();
@@ -53,40 +51,41 @@
</div>
<h3 class="streams_intro">The easiest way to write mission-critical real-time applications and microservices</h3>
<p class="streams__description">Kafka Streams is a client library for building applications and microservices, where the input and output data are stored in Kafka clusters. It combines the simplicity of writing and deploying standard Java and Scala applications on the client side with the benefits of Kafka's server-side cluster technology.</p>
- <hr class="separator">
- <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"
+ <div class="yt__video__block">
+ <div class="yt__video__inner__block">
+ <img id="iframe-placeholder-intro" width="600" height="325"
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')" />
+ onclick="loadVideo('iframe-placeholder-intro', 'Z3JKCLG3VP4?rel=0&showinfo=0&end=602', '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"
+ <img id="iframe-placeholder-creating" width="600" height="325"
border="1px"
class="yt__placeholder video_2"
src="/{{version}}/images/creating-streams-iframe-placeholder.png"
- onclick="loadVideo('iframe-placeholder-creating', 'LxxeXI1mPKo', 'video_2')" />
+ onclick="loadVideo('iframe-placeholder-creating', 'LxxeXI1mPKo?rel=0&showinfo=0&end=622', '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"
+ <img id="iframe-placeholder-transforming" width="600" height="325"
border="1px"
class="yt__placeholder video_3"
src="/{{version}}/images/transforming_part_1-iframe-placeholder.png"
- onclick="loadVideo('iframe-placeholder-transforming', '7JYEEx7SBuE', 'video_3')" />
+ onclick="loadVideo('iframe-placeholder-transforming', '7JYEEx7SBuE?rel=0&showinfo=0end=557', '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"
+ <img id="iframe-placeholder-transforming-two" width="600" height="325"
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')" />
+ onclick="loadVideo('iframe-placeholder-transforming-two', '3kJgYIkAeHs?rel=0&showinfo=0&end=564', 'video_4')" />
<span class="third-party" id="video_4_warn">(Clicking the image will load a video from YouTube)</span>
</div>
+ </div>
+ <div class="video__block">
+ <h3>TOUR OF THE STREAMS API</h3>
<div class="video__list">
<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>
