docs(docs-infra): for accessibility and responsive, iframe should be in video container, contain some space horizontally, and title (#51475)

PR Close #51475
This commit is contained in:
Shuaib hasan akib
2023-08-23 21:02:17 +06:00
committed by Jessica Janiuk
parent 0839885a50
commit 3c28506f8e
5 changed files with 13 additions and 4 deletions
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+5 -1
View File
@@ -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`
+5 -1
View File
@@ -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:
@@ -7,6 +7,7 @@
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
margin: 20px 0;
iframe {
position: absolute;