css: make the inline video figure a full-width block

sphinxcontrib-video wraps <video> in an align-left (floated) figure and emits
<video width="100%">, which browsers ignore on <video> (unlike <img>) -- so the
video shrank to its intrinsic 680px and the following paragraph wrapped beside
the float, one char per line. Force the video figure to a non-floated full-width
block and size the <video> via CSS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: kwagyeman

docs/static/custom.css

@@ -1120,6 +1120,26 @@ video.framed,
     overflow: hidden;
 }
 
+/* sphinxcontrib-video wraps the <video> in a figure that defaults to
+   "align-left" (floated), and emits <video width="100%"> -- which browsers
+   honour on <img> but NOT on <video>, so the video falls back to its intrinsic
+   size and the following text wraps beside the float. Force the video figure to
+   a full-width, non-floated block so text flows below it. */
+.sphinx-contrib-video-container.align-left,
+.sphinx-contrib-video-container {
+    float: none;
+    display: block;
+    width: 100%;
+    margin: 1.5rem 0;
+}
+.sphinx-contrib-video-container video,
+video.framed {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin: 0;
+}
+
 /* Sidebar: the theme absolutely-positions the expand/collapse chevron
    at the right edge of each entry, so long titles run underneath it.
    Reserve a thin column for the chevron on rows that have one. */