website: embed yt videos on intro pages (#6871)

- website: embed yt videos on intro pages
- for /docs/connect
- for /intro
- css to handle iframe responding at smaller viewports
- Update consul connect video with introductory description. Co-Authored-By: kaitlincarter-hc <43049322+kaitlincarter-hc@users.noreply.github.com>
- Update consul connect intro with introductory description. Co-Authored-By: kaitlincarter-hc <43049322+kaitlincarter-hc@users.noreply.github.com>

website/source/assets/stylesheets/_inner.scss

@@ -157,4 +157,9 @@
     @extend .table;
     @extend .table-striped;
   }
+
+  iframe {
+    width: 100%;
+    max-width: 560px;
+  }
 }

website/source/docs/connect/index.html.md

@@ -18,6 +18,10 @@ with Connect](/docs/connect/native.html) for optimal performance and security.
 Connect can help you secure your services and provide data about service-to-service
 communications.
 
+Review the video below to learn more about Consul Connect from HashiCorp's co-founder Armon. 
+
+<iframe src="https://www.youtube.com/embed/8T8t4-hQY74" frameborder="0" allowfullscreen="true"  width="560" height="315" ></iframe>
+
 ## Application Security
 
 Connect enables secure deployment best-practices with automatic

website/source/intro/index.html.md

@@ -24,6 +24,10 @@ supports both a proxy and native integration model. Consul ships with a
 simple built-in proxy so that everything works out of the box, but also
 supports 3rd party proxy integrations such as Envoy.
 
+Review the video below to learn more about Consul from HashiCorp's co-founder Armon. 
+
+<iframe src="https://www.youtube.com/embed/mxeMdl0KvBI" frameborder="0" allowfullscreen="true"  width="560" height="315" ></iframe>
+
 The key features of Consul are:
 
 * **Service Discovery**: Clients of Consul can register a service, such as