From 3c28506f8e5afff33a2086cdc6cfbe11a6a7b35f Mon Sep 17 00:00:00 2001
From: Shuaib hasan akib <akibh805@gmail.com>
Date: Wed, 23 Aug 2023 21:02:17 +0600
Subject: [PATCH] docs(docs-infra): for accessibility and responsive,  iframe
 should be in video container, contain some space horizontally, and title
 (#51475)

PR Close #51475
---
 aio/content/guide/devtools.md                        | 2 +-
 aio/content/guide/i18n-overview.md                   | 2 +-
 aio/content/guide/standalone-components.md           | 6 +++++-
 aio/content/guide/typed-forms.md                     | 6 +++++-
 aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss | 1 +
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/aio/content/guide/devtools.md b/aio/content/guide/devtools.md
index 03f914e1953..6227b5b2858 100644
--- a/aio/content/guide/devtools.md
+++ b/aio/content/guide/devtools.md
@@ -5,7 +5,7 @@ Angular DevTools supports Angular v12 and later when compiled with the [optimiza
 
 <div class="video-container">
 
-<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/bavWOHZM6zE"></iframe>
+<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" title="DevTools Overview" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/bavWOHZM6zE"></iframe>
 
 </div>
 
diff --git a/aio/content/guide/i18n-overview.md b/aio/content/guide/i18n-overview.md
index 6511b0baecd..8aa28beae0c 100644
--- a/aio/content/guide/i18n-overview.md
+++ b/aio/content/guide/i18n-overview.md
@@ -20,7 +20,7 @@ For a quick introduction to localization and internationalization watch this vid
 
 <div class="video-container">
 
-<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/KNTN-nsbV7M"></iframe>
+<iframe allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" title="Angular Internationalization" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/KNTN-nsbV7M"></iframe>
 
 </div>
 
diff --git a/aio/content/guide/standalone-components.md b/aio/content/guide/standalone-components.md
index 7fba5c5f6fd..c497e437a2b 100644
--- a/aio/content/guide/standalone-components.md
+++ b/aio/content/guide/standalone-components.md
@@ -4,7 +4,11 @@
 
 ## Creating standalone components
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/x5PZwb4XurU" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="video-container">
+
+<iframe src="https://www.youtube.com/embed/x5PZwb4XurU" title="Getting started with standalone components" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</div>
 
 ### The `standalone` flag and component `imports`
 
diff --git a/aio/content/guide/typed-forms.md b/aio/content/guide/typed-forms.md
index 3c97d96b072..aa0edefca56 100644
--- a/aio/content/guide/typed-forms.md
+++ b/aio/content/guide/typed-forms.md
@@ -12,7 +12,11 @@ As background for this guide, you should already be familiar with [Angular React
 
 ## Overview of Typed Forms
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/L-odCf4MfJc" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="video-container">
+
+<iframe src="https://www.youtube.com/embed/L-odCf4MfJc" title="Angular Typed Forms" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+</div>
 
 With Angular reactive forms, you explicitly specify a *form model*. As a simple example, consider this basic user login form:
 
diff --git a/aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss b/aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
index af09c313d09..b7e53b165dd 100644
--- a/aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
+++ b/aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
@@ -7,6 +7,7 @@
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   height: 0;
+  margin: 20px 0;
 
   iframe {
     position: absolute;