docs: Documentation adjustments

build/workflow/stage-determine-changes.yml

@@ -34,11 +34,11 @@ jobs:
       }
 
       foreach ($file in $changedFiles -split "`n") {
-        # Identifying changes as documentation if they occur:
-        # Within the doc folder, or
-        # Are Markdown files at the root level (with no subdirectories involved), or
-        # Are Markdown files within the .github folder (including its subdirectories)
-          $isDoc = $file.StartsWith("doc/") -or ($file -match "^[^/]+\.md$") -or ($file -match "^\.github/.*\.md$")
+        # Identifying changes as documentation:
+          $isDoc = $file.StartsWith("doc/") -or               # Files in the 'doc/' directory
+            ($file -match "^[^/]+\.md$") -or                  # Markdown files at the root level (with no subdirectories involved)
+            ($file -match "^\.github/.*\.md$") -or            # Markdown files within the .github folder (including its subdirectories)
+            ($file -match "^\.(markdownlint|cspell)\.json$")  # Specific JSON files: .markdownlint.json and cspell.json
           
           if ($isDoc) {
               $docFiles++

doc/controls/DrawerFlyoutPresenter.md

@@ -92,16 +92,7 @@ notes:
 
 ### Usage
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/JWTZxnVsd_A"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/JWTZxnVsd_A]
 
 To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`.
 
@@ -151,7 +142,8 @@ Example:
     </Flyout>
     ```
 
-    > remarks: `Padding` is used on the flyout content to avoid content being clipped.
+    > [!NOTE]
+    > `Padding` is used on the flyout content to avoid content being clipped.
 - Custom background
 
     ```xml
@@ -167,7 +159,8 @@ Example:
     </Flyout>
     ```
 
-    > remarks: Avoid setting `Background` directly on the flyout content:
+    > [!WARNING]
+    > Avoid setting `Background` directly on the flyout content:
     >
     > ```xml
     > <Border toolkit:VisibleBoundsPadding.PaddingMask="All" Background="SkyBlue">

doc/controls/ExtendedSplashScreen.md

@@ -17,17 +17,8 @@ A common use case for this control is to display an application loading element
 
 > [!TIP]
 > Users expect applications to load quickly after they launch them, so it is important to minimize the duration that a splash screen is displayed. `ExtendedSplashScreen` is intended to support a consistent user experience across platforms where scenarios necessitate a longer startup process.
-
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/jMI4E2e9gYE"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+>
+> [!Video https://www.youtube-nocookie.com/embed/jMI4E2e9gYE]
 
 ## Properties
 

doc/controls/LoadingView.md

@@ -6,16 +6,7 @@ uid: Toolkit.Controls.LoadingView
 
 Represents a control that indicates that the UI is waiting on a task to complete.
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/3cpjJ3keBvM"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/3cpjJ3keBvM]
 
 ## Properties
 

doc/controls/NavigationBar.md

@@ -13,16 +13,7 @@ The `NavigationBar` represents a specialized app bar that provides the layout fo
 
 For a quick introduction to `NavigationBar`, you can check out our introductory video below:
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/4-Q0hy2BnMI"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/4-Q0hy2BnMI]
 
 This document highlights some of the differences you might encounter when working with the native mode of `NavigationBar` on either **iOS** or **Android**.
 

doc/controls/ResponsiveView.md

@@ -84,31 +84,13 @@ If you prefer instructional videos, you can follow our tutorials on how to work
 
 ### [**XAML**](#tab/techbite-xaml) <!-- markdownlint-disable-line MD051 -->
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/VgpC79ErNRI"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/VgpC79ErNRI]
 
 ### [**C# Markup**](#tab/techbite-csmarkup) <!-- markdownlint-disable-line MD051 -->
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/lQueBn6LEyU"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
-
-***
+> [!Video https://www.youtube-nocookie.com/embed/lQueBn6LEyU]
+
+---
 
 > [!TIP]
 > It is not necessary to define every template or layout breakpoint: Narrowest, Narrow, Normal, Wide, Widest. You can just define the bare minimum needed.

doc/controls/SafeArea.md

@@ -12,16 +12,7 @@ The `ApplicationView.VisibleBounds` is the rectangular area of the screen which
 
 In some cases, it is acceptable for visible content to be partially obscured (a page background for example) and it should extend to fill the entire window. Other types of content should be restricted to the visible bounds (for instance: readable text, or interactive controls). `SafeArea` enables this kind of fine-grained control over responsiveness to the safe and "unsafe" areas of the screen.
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/H-HkMzYCiOM"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/H-HkMzYCiOM]
 
 ## Properties
 
@@ -186,7 +177,7 @@ Bottom TabBar:
 
 ![safearea_with_margin_alpha](../assets/safearea_with_margin.png)
 
-***
+---
 
 ### Using `InsetMask.SoftInput` for on-screen keyboards
 

doc/controls/ShadowContainer.md

@@ -8,16 +8,7 @@ uid: Toolkit.Controls.ShadowContainer
 
 The `ShadowContainer` provides the ability to layer multiple shadows to its content.
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/mohQvifKF0Y"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/mohQvifKF0Y]
 
 ## Package Reference
 

doc/getting-started.md

@@ -12,16 +12,7 @@ This article is a guide for installing the base Uno Toolkit library, additional
 - [Getting Started with Material for Toolkit](xref:Toolkit.GettingStarted.Material)
 - [Getting Started with Cupertino for Toolkit](xref:Toolkit.GettingStarted.Cupertino)
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/sDmyWJaQp4Q"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/sDmyWJaQp4Q]
 
 ### Installation
 

doc/helpers/StatusBar-extensions.md

@@ -6,16 +6,7 @@ uid: Toolkit.Helpers.StatusBarExtensions
 
 Provides two attached properties on `Page` to control the visuals of the status bar on mobile platforms.
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/Mef71b6978s"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/Mef71b6978s]
 
 ## Remarks
 

doc/helpers/resource-extensions.md

@@ -6,16 +6,7 @@ uid: Toolkit.Helpers.ResourceExtensions
 
 This extension facilitates assigning a specific `ResourceDictionary` directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating the necessity to declare each resource on the page explicitly, enabling the easy creation of diverse visual elements with shared styles but varied attributes. The extension also supports the reuse of resource dictionaries across different control styles, enhancing consistency and efficiency in the UI design process.
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/OwQkYSlowfU"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/OwQkYSlowfU]
 
 ## Attached Properties
 

doc/lightweight-styling.md

@@ -5,16 +5,7 @@ uid: Toolkit.LightweightStyling
 
 For general information about [lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling), check out [Lightweight Styling in Uno.Themes](xref:uno.themes.lightweightstyling).
 
-<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
-    <iframe
-        src="https://www.youtube-nocookie.com/embed/5CsJHMTlNAw"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-    </iframe>
-</div>
+> [!Video https://www.youtube-nocookie.com/embed/5CsJHMTlNAw]
 
 ## Example