Add videos to xrpl overview page

Update css to v6

Add videos to xrpl overview page

Update css to v6

Move video player up on screen

Adjust vid position and size

Fix expanded video sizing on more resolutions

assets/js/video.js

@@ -0,0 +1,25 @@
+
+$(document).ready(()=> {
+  
+  //top video. Show inline replacing image
+  $("#playvideo").click(function(){
+    $("#playvideo").hide();
+    $("#video1").show();
+    $("#video1")[0].src += "?autoplay=1";
+  });
+
+  //bottom 3. Show in overlay
+  $('.btn1').click(function() {
+    var src = $(this).attr("data-url");
+    $("#player").attr("src", src);
+    $('#video, #video-overlay').fadeIn('slow');
+  });
+
+});
+
+$(document).on('touchend, mouseup', function(e) {
+  if (!$('#video').is(e.target)) {
+    $('#video, #video-overlay').fadeOut('slow');
+    $("#player").attr("src", '');
+  }
+});

styles/_video.scss

@@ -0,0 +1,95 @@
+.video-image {
+  transition: all 0.35s ease-out;
+  cursor: pointer;
+  &:hover {
+    -webkit-transform: translateY(-16px);
+    -moz-transform: translateY(-16px);
+    -ms-transform: translateY(-16px);
+    -o-transform: translateY(-16px);
+    transform: translateY(-16px);
+  }
+}
+
+#video-overlay {
+  position:fixed;
+  top:0;
+  left:0;
+   z-index:1190;
+  height:100%;
+  width:100%;
+  background:#ffffff;
+  opacity:0.6;
+  display:none;
+}
+
+#video {
+  display: none;
+  position: fixed;
+  top: 10%;
+  left: 15%;
+  width: 70%;
+  z-index: 1200;
+}
+
+#video-container {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  max-width: 982px;
+  padding: 0 20px;
+}
+
+#videoWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: calc(90vh - 100px);
+  width: 80vw;
+}
+
+#videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video-external-link {
+  color: $blue-purple-400;
+  font-weight: 600;
+
+  &::after {
+    content: "\00a0";
+    background-image: url(../img/icons/arrow-up-right.svg);
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-size: 10px;
+    padding: 0 4px 0 8px;
+    width: 2rem;
+    background-position: left 8px bottom 6px;
+    transition: background-position 100ms ease-in-out;
+  }
+
+  &.video-external-link:hover::after {
+    background-position: left 12px bottom 8px;
+  }
+}
+
+.video-title{
+  line-height: 1.2;
+
+  @include media-breakpoint-up(md) {
+    font-size: 1rem;
+  }
+}

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^6.0.1"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021-v5.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021-v5.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2021-v5.css --output-style compressed --source-map true"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021-v6.css --output-style compressed",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6.css --output-style compressed --source-map true",
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

styles/xrpl.scss

@@ -66,6 +66,7 @@ $line-height-base: 1.5;
 @import "_rpc-tool.scss";
 @import "_blog.scss";
 @import "_feedback.scss";
+@import "_video.scss";
 //@import "top-banner.scss";
 
 // Light/Dark theme settings ---------------------------------------------------

template/base.html.jinja

@@ -53,7 +53,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2021-v5.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2021-v6.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 

template/page-xrpl-overview.html.jinja

@@ -8,6 +8,10 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
+
+  <!-- Play videos from youtube -->
+  <script src="assets/js/video.js"></script>
+
 {% endblock %}
 
 {% block bodyclasses %}no-sidebar{% endblock %}
@@ -17,6 +21,13 @@
 
 {% block main %}
 <div class="overflow-hidden">
+  
+  <div id="video-overlay"></div>
+  <div id="video">
+    <div id="videoWrapper">
+    <iframe id="player" width="853" height="480" src="" frameborder="0" allowfullscreen></iframe>
+    </div>
+  </div>
 
   <div class="position-relative">
     <img src="./img/backgrounds/xrpl-overview-purple.svg" class="landing-bg" id="xrpl-overview-purple">
@@ -36,14 +47,29 @@
   </div>
 
   <section class="container-new py-26">
-    <div class="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-10-until-sm">
-      <div class="d-flex flex-column-reverse">
-        <h2 class="h4 h2-sm mb-8">{% trans %}How the XRP Ledger works{% endtrans %}</h2>
-        <h6 class="eyebrow mb-3">{% trans %}XRP Ledger Basics{% endtrans %}</h6>
+    <div class="card-grid card-grid-2xN">
+      <div class="col">
+        <div class="d-flex flex-column-reverse">
+          <h2 class="h4 h2-sm mb-8">{% trans %}How the XRP Ledger works{% endtrans %}</h2>
+          <h6 class="eyebrow mb-3">{% trans %}XRP Ledger Basics{% endtrans %}</h6>
+        </div>
+        <h5 class="longform mb-10">{% trans %}The XRP Ledger is a decentralized public blockchain. {% endtrans %}</h5>
+        <p class="mb-4">{% trans %}Anyone can connect their computer to the peer-to-peer network that manages the ledger. The global XRP Ledger community—a diverse set of software engineers, server operators, users, and businesses—maintains the ledger.{% endtrans %}</p>
+        <div class="d-none d-lg-block">
+          <a class="btn btn-primary btn-arrow" href="docs.html">{% trans %}Read Technical Docs{% endtrans %}</a> <a class="ml-4 video-external-link" target="_blank" href="https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg">{% trans %}Watch Explainer Videos {% endtrans %}</a> 
+        </div>
+      </div>
+      <div class="col">
+        <iframe id="video1" style="display:none;" width="560" height="315" src="https://www.youtube.com/embed/sVTybJ3cNyo" title="Intro to the XRP Ledger" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <a href="#/" id="playvideo">
+          <img src="./assets/img/overview/video_explainer_intro@2x.png" id="xrpl-overview-video-intro" class="w-100 video-image">
+        </a>
+
+        <div class="text-center d-lg-none">
+        <a class="btn btn-primary btn-arrow mt-5 mb-4" href="docs.html">{% trans %}Read Technical Docs{% endtrans %}</a> <a class="ml-4 video-external-link" target="_blank" href="https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg">{% trans %}Watch Explainer Videos {% endtrans %}</a> 
+        </div>
+
       </div>
-      <h5 class="longform mb-10">{% trans %}The XRP Ledger is a decentralized public blockchain. {% endtrans %}</h5>
-      <p class="mb-10">{% trans %}Anyone can connect their computer to the peer-to-peer network that manages the ledger. The global XRP Ledger community—a diverse set of software engineers, server operators, users, and businesses—maintains the ledger.{% endtrans %}</p>
-      <a class="btn btn-primary btn-arrow" href="docs.html">{% trans %}Get Technical{% endtrans %}</a>
     </div>
   </section>
 
@@ -97,6 +123,43 @@
     </div>
   </section>
 
+  <section class="container-new py-26">
+    <div class="d-flex flex-column-reverse col-xl-6 mb-lg-4 pl-0 ">
+      <h2 class="h4 h2-sm">{% trans %}Watch the explainer video series to learn more about the XRP Ledger.{% endtrans %}</h2>
+      <h6 class="eyebrow mb-3">{% trans %}Tune In{% endtrans %}</h6>
+    </div>
+
+    <div class="row row-cols-1 row-cols-lg-3 d-flex justify-content-between w-100 mx-0 mx-md-n3 mt-md-5">
+        <div class="px-md-3 pt-5 pt-md-0">
+          <a href="#/" class="btn1" data-url="https://www.youtube.com/embed/k6VqEkqRTmk?rel=0&amp;showinfo=0&amp;autoplay=1">
+            <img src="./assets/img/overview/video_explainer_consensus@2x.png" id="xrpl-overview-video-consensus" class="w-100 video-image">
+          </a>
+          <div class="mt-2">
+            <h4 class="video-title mt-3 mb-0">{% trans %}The Consensus Mechanism{% endtrans %}</h4>            
+          </div>
+        </div>
+        <div class="px-md-3 pt-5 pt-md-0">
+          <a href="#/" class="btn1" data-url="https://www.youtube.com/embed/JjaVDXPqnbA?rel=0&amp;showinfo=0&amp;autoplay=1">
+            <img src="./assets/img/overview/video_explainer_nodes@2x.png" id="xrpl-overview-video-nodes" class="w-100 video-image">
+          </a>
+          <div class="mt-2">
+            <h4 class="video-title mt-3 mb-0">{% trans %}Nodes and Validators{% endtrans %}</h4>            
+          </div>
+        </div>
+        <div class="px-md-3 pt-5 pt-md-0">
+          <a href="#/" class="btn1" data-url="https://www.youtube.com/embed/WsmldDNGQ9s?rel=0&amp;showinfo=0&amp;autoplay=1">
+            <img src="./assets/img/overview/video_explainer_sustainability@2x.png" id="xrpl-overview-video-sustainability" class="w-100 video-image">
+          </a>
+          <div class="mt-2">
+            <h4 class="video-title mt-3 mb-0">{% trans %}Sustainability of the XRP Ledger{% endtrans %}</h4>            
+          </div>
+        </div>
+    </div>
+    <div class="pt-5 w-100">
+      <a class="btn btn-primary btn-arrow" target="_blank" href="https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg">{% trans %}Watch Full Series on YouTube{% endtrans %}</a>
+    </div>
+  </section>
+
   <section class="container-new py-26">
     <div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
       <img src="./img/backgrounds/cta-xrpl-overview-orange.svg" class="cta cta-bottom-right">