Embed YouTube videos in different webpages (#1380)

* Changes for EmbedVideos

* minor changes for adding title

* dummy changes for EasyCLA check

assets/scss/_grpc.scss

@@ -471,3 +471,24 @@ c - Component (Aware of its content/context...)
   height: 100%; 
   border: 0; 
 }
+
+.youtube-video-center {
+  display: flex;
+  justify-content: center;
+}
+
+.youtube-video-center .video-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 1000px;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.youtube-video-center iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+

content/en/_index.md

@@ -49,9 +49,18 @@ health checking and authentication. It is also applicable in last mile of
 distributed computing to connect devices, mobile applications and browsers to
 backend services.
 </section>
+<div class="youtube-video-center">
+    <div class="video-wrapper">
+        <iframe 
+            src="https://www.youtube.com/embed/5dMK5OW6WSw" 
+            title="Ten Years of gRPC" 
+            frameborder="0" 
+            allowfullscreen>
+        </iframe>
+    </div>
+</div>
 
 {{< home/features >}}
 {{< home/used-by >}}
 {{< home/cncf >}}
-
 </div>

content/en/about/_index.md

@@ -19,6 +19,8 @@ menu:
 <div class="row">
 <div class="col-12 col-lg-8">
 
+{{< youtube id="5dMK5OW6WSw" class="youtube-video" title="Ten Years of gRPC" >}}
+
 gRPC is a modern open source high performance Remote Procedure Call (RPC)
 framework that can run in any environment. It can efficiently connect services
 in and across data centers with pluggable support for load balancing, tracing,

content/en/docs/guides/_index.md

@@ -6,5 +6,6 @@ nav_children: pages
 menu:
   main: {weight: 3}
 ---
-
+{{< youtube id="sImWl7JyK_Q" class="youtube-video" title="Overview of gRPC" >}}
+---
 The documentation covers the following techniques:

content/en/docs/guides/custom-load-balancing.md

@@ -4,7 +4,7 @@ description: >-
   Explains how custom load balancing policies can help optimize load balancing
   under unique circumstances.
 ---
-
+{{< youtube id="G6PRjmXuBG8" class="youtube-video" title="Load Balancing in gRPC" >}}
 ### Overview
 
 One of the key features of gRPC is load balancing, which allows requests from
@@ -16,8 +16,6 @@ A gRPC load balancing policy is given a list of server IP addresses by the name
 resolver. The policy is responsible for maintaining connections (subchannels)
 to the servers and picking a connection to use when an RPC is sent.
 
-{{< youtube id="7LYvl-nr0t8" class="youtube-video" title="gRPC Weighted Round Robin LB Policy" >}}
-
 ### Implementing Your Own Policy
 
 By default the `pick_first` policy will be used. This policy actually does no

content/en/docs/guides/metadata.md

@@ -3,7 +3,7 @@ title: Metadata
 description: >-
   Explains what metadata is, how it is transmitted, and what it is used for.
 ---
-
+{{< youtube id="psYQFbPgIOI" class="youtube-video" title="gRPC metadata limits:The Good, The Bad and The Ugly" >}}
 ### Overview
 
 Metadata is a side channel that allows clients and servers to provide

content/en/docs/guides/performance.md

@@ -2,7 +2,7 @@
 title: Performance Best Practices
 description: A user guide of both general and language-specific best practices to improve performance.
 ---
-
+{{< youtube id="uQh9ZVGkrak" class="youtube-video" title="gRPC Performance and Testing: a Maintainer Perspective" >}}
 ### General
 
 *   Always **re-use stubs and channels** when possible.

content/en/docs/what-is-grpc/_index.md

@@ -4,4 +4,4 @@ description: New to gRPC? Start with the following pages
 weight: 1
 ---
 
-{{< youtube id="E3ez34fdC0k" class="youtube-video" title="Overview of gRPC" >}}
+{{< youtube id="cSGBbwvW1y4" class="youtube-video" title="Getting started with gRPC" >}}

content/en/docs/what-is-grpc/core-concepts.md

@@ -10,7 +10,7 @@ Not familiar with gRPC? First read [Introduction to gRPC](../introduction/). For
 language-specific details, see the quick start, tutorial, and reference
 documentation for your language of choice.
 
-{{< youtube id="njC24ts24Pg" class="youtube-video" title="gRPC in 5 minutes" >}}
+{{< youtube id="sImWl7JyK_Q" class="youtube-video" title="Overview of gRPC" >}}
 
 ### Overview
 

content/en/docs/what-is-grpc/introduction.md

@@ -12,6 +12,8 @@ interchange format. If you’re new to gRPC and/or protocol buffers, read this!
 If you just want to dive in and see gRPC in action first,
 [select a language](/docs/languages/) and try its **Quick start**.
 
+{{< youtube id="njC24ts24Pg" class="youtube-video" title="gRPC in 5 minutes" >}}
+
 ## Overview
 
 In gRPC, a client application can directly call a method on a server application
@@ -32,8 +34,6 @@ create a gRPC server in Java with clients in Go, Python, or Ruby. In addition,
 the latest Google APIs will have gRPC versions of their interfaces, letting you
 easily build Google functionality into your applications.
 
-{{< youtube id="cSGBbwvW1y4" class="youtube-video" title="getting started with gRPC" >}}
-
 ### Working with Protocol Buffers
 
 By default, gRPC uses [Protocol Buffers][], Google’s

content/en/showcase/_index.md

@@ -69,7 +69,15 @@ find developer stories for your [preferred language](/docs/languages/) on each
 </div>
 
 Other developer stories are provided next.
-
+- **Adapting our xDS control plane for proxyless gRPC**
+  <a class="o-icon" href="https://youtu.be/gc3kNMvgrHQ"><i class="fab fa-youtube"></i></a><br>
+  by Antoine Tollenaere, Datadog
+- **Building SpiceDB: a gRPC-first database**
+  <a class="o-icon" href="https://youtu.be/v_e2ExQwphQ"><i class="fab fa-youtube"></i></a><br>
+  by Jimmy Zelinskie, authzed
+- **Enhancing gRPC micro-services**
+  <a class="o-icon" href="https://youtu.be/GDJrw36wwWY"><i class="fab fa-youtube"></i></a><br>
+  by Holly Casaletto and Yucong Sun, Coinbase
 - **[Expedia Group Case Study: Bootiful APIs With GraphQL and Kotlin][Expedia]**,
   by [Anton Arhipov](https://blog.jetbrains.com/author/antonarhipov),
   [JetBrains](https://www.jetbrains.com/),