Merge pull request #10 from pip-install-python/home-video

Add the introduction video to the home page and the README

Author: pip-install-python

CHANGELOG.md

@@ -78,6 +78,13 @@ analytics and its CI.
   markdown's H1 and the README. This matters because the home page is
   registered as `"Home"`, which `resolve_site_title` skips as generic; without
   the explicit registration the site published a framework fallback.
+- **An introduction video** on the home page and in the README —
+  [*Dash Leaflet 2.0: Drone Tracking, Image Overlays & Map Packages in
+  Python*](https://youtu.be/Wlmw98JrJZI). Embedded from
+  `youtube-nocookie.com`, so the player sets no visitor-tracking cookies on a
+  site that otherwise counts nothing beyond an anonymised page view, and
+  accompanied by a plain link — an agent reading `/llms.txt` never sees an
+  iframe, and neither does anyone whose browser blocks the embed.
 - **`scripts/network_smoke.py`** — the network's named-check battery, run
   against the CI container and against production with identical check names.
   Proves identity, the agent-facing document surfaces, the robots fingerprint,

README.md

@@ -73,6 +73,20 @@ all live inside `dash_leaflet2.js`. A normal `pip install` needs no Node and no
 > alpha and APIs will move until v2 leaves alpha upstream. See
 > [CHANGELOG.md](./CHANGELOG.md) for what's shipped, fixed and known-broken.
 
+## Watch the introduction
+
+<div align="center">
+
+<a href="https://youtu.be/Wlmw98JrJZI">
+  <img src="https://img.youtube.com/vi/Wlmw98JrJZI/maxresdefault.jpg" alt="Dash Leaflet 2.0: Drone Tracking, Image Overlays &amp; Map Packages in Python" width="720">
+</a>
+
+**[Dash Leaflet 2.0: Drone Tracking, Image Overlays &amp; Map Packages in Python](https://youtu.be/Wlmw98JrJZI)**
+
+</div>
+
+Drone tracking, image overlays and map packages, built with this library.
+
 ## Installation
 
 ```bash

docs/home/home.md

@@ -34,6 +34,16 @@ reach of a Python callback:
 The demo below is the whole claim in one page: Leaflet `2.0.0-alpha.1`,
 rendering inside Dash 4, with no JavaScript build step.
 
+### Watch the introduction
+
+[Dash Leaflet 2.0: Drone Tracking, Image Overlays & Map Packages in
+Python](https://youtu.be/Wlmw98JrJZI) — drone tracking, image overlays and map
+packages, built with this library.
+
+.. exec::docs.home.video
+    :code: false
+    :border: false
+
 ### Live demo
 
 .. exec::docs.home.example

docs/home/video.py

@@ -0,0 +1,79 @@
+"""Home — the introduction video.
+
+Its own module rather than part of `example.py` because the two are different
+things: `example.py` is the live Leaflet 2 demo that proves the library
+renders, and this is a recording that explains it. `.. exec::` imports each by
+module path, so keeping them separate lets the markdown place them
+independently.
+
+Embedded from `youtube-nocookie.com`, which is YouTube's no-tracking-cookie
+origin. It plays identically and does not set the visitor-tracking cookies the
+standard embed does — worth having on a documentation site that otherwise
+counts nothing about its readers beyond an anonymised page view.
+"""
+
+import dash_mantine_components as dmc
+from dash import html
+
+VIDEO_ID = "Wlmw98JrJZI"
+VIDEO_URL = f"https://youtu.be/{VIDEO_ID}"
+VIDEO_TITLE = "Dash Leaflet 2.0: Drone Tracking, Image Overlays & Map Packages in Python"
+
+component = dmc.Stack(
+    [
+        html.Div(
+            html.Iframe(
+                src=(
+                    f"https://www.youtube-nocookie.com/embed/{VIDEO_ID}"
+                    "?rel=0&modestbranding=1"
+                ),
+                title=VIDEO_TITLE,
+                # `fullscreen` belongs in `allow`, not in a separate
+                # `allowFullScreen` prop: Dash 4.4.1's html.Iframe does not
+                # expose the legacy attribute at all, and without the
+                # permission the player still renders a fullscreen button that
+                # silently does nothing — which reads as a broken embed rather
+                # than a missing feature.
+                allow=(
+                    "accelerometer; autoplay; clipboard-write; encrypted-media; "
+                    "fullscreen; gyroscope; picture-in-picture; web-share"
+                ),
+                # Nothing here needs the container's origin, and the iframe is
+                # third-party — so it gets only what a video player requires.
+                referrerPolicy="strict-origin-when-cross-origin",
+                style={
+                    "position": "absolute",
+                    "top": 0,
+                    "left": 0,
+                    "width": "100%",
+                    "height": "100%",
+                    "border": "0",
+                    "borderRadius": "8px",
+                },
+            ),
+            # The padding-bottom trick rather than `aspect-ratio`: it holds the
+            # 16:9 box open from first paint in every engine, so the page does
+            # not reflow when the iframe finally loads. (Dash 4.4.1's
+            # html.Iframe exposes no `loading` prop, so the embed is eager and
+            # the reserved box is what keeps the layout stable regardless.)
+            style={
+                "position": "relative",
+                "paddingBottom": "56.25%",
+                "height": 0,
+                "overflow": "hidden",
+                "borderRadius": "8px",
+            },
+        ),
+        # A real link as well as the player. An agent reading /llms.txt never
+        # sees the iframe, and neither does anyone whose browser blocks the
+        # embed — both should still be able to reach the video.
+        dmc.Anchor(
+            f"Watch on YouTube: {VIDEO_TITLE}",
+            href=VIDEO_URL,
+            target="_blank",
+            size="sm",
+            c="dimmed",
+        ),
+    ],
+    gap="xs",
+)