From c9bc88757bda70c482d98e9d03169f47e2d895c2 Mon Sep 17 00:00:00 2001
From: mgechev <mgechev@gmail.com>
Date: Tue, 18 May 2021 16:29:55 -0700
Subject: [PATCH] docs: embed the devtools video in the corresponding guide
 (#42161)

Allow people consume the content in a video format.

PR Close #42161
---
 aio/content/guide/devtools.md                      |  8 ++++++++
 aio/src/styles/1-layouts/_doc-viewer.scss          | 14 ++++++++++++++
 aio/src/styles/2-modules/_errors.scss              | 14 --------------
 .../transforms/templates/error/error.template.html | 10 +++++-----
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/aio/content/guide/devtools.md b/aio/content/guide/devtools.md
index 9268ea3a0b..3d564bc7ce 100644
--- a/aio/content/guide/devtools.md
+++ b/aio/content/guide/devtools.md
@@ -2,6 +2,14 @@
 
 Angular DevTools is a Chrome extension that provides debugging and profiling capabilities for Angular applications. Angular DevTools supports Angular v9 and above, with Ivy enabled.
 
+<div class="video-container">
+  <iframe
+  src="https://www.youtube.com/embed/bavWOHZM6zE"
+  frameborder="0"
+  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen></iframe>
+</div>
+
 You can find Angular DevTools in the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh).
 
 After installing Angular DevTools, you can find the extension under the Angular tab in Chrome DevTools.
diff --git a/aio/src/styles/1-layouts/_doc-viewer.scss b/aio/src/styles/1-layouts/_doc-viewer.scss
index 928f2c666b..af09c313d0 100644
--- a/aio/src/styles/1-layouts/_doc-viewer.scss
+++ b/aio/src/styles/1-layouts/_doc-viewer.scss
@@ -2,3 +2,17 @@
   // Disable view transition animations.
   transition: none !important;
 }
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss
index 5446aa0dc5..9760bcefe9 100644
--- a/aio/src/styles/2-modules/_errors.scss
+++ b/aio/src/styles/2-modules/_errors.scss
@@ -55,17 +55,3 @@
     }
   }
 }
-
-.error-video-container {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 */
-  height: 0;
-
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/aio/tools/transforms/templates/error/error.template.html b/aio/tools/transforms/templates/error/error.template.html
index 46093c2503..85be3bfaa0 100644
--- a/aio/tools/transforms/templates/error/error.template.html
+++ b/aio/tools/transforms/templates/error/error.template.html
@@ -6,11 +6,11 @@
 </div>
 
 {% if doc.videoUrl.length %}
-<div class="error-video-container">
+<div class="video-container">
   <iframe
-  src="{$ doc.videoUrl $}" 
-  frameborder="0" 
-  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" 
+  src="{$ doc.videoUrl $}"
+  frameborder="0"
+  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen></iframe>
 </div>
 {% endif%}
@@ -25,4 +25,4 @@
   <h2>Debugging the error</h2>
   {$ doc.debugging | marked $}
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}