stop videos causing horizontal scrolling (#4495)

Videos in the Reflow Understanding document were causing horizontal
scrolling at 320px width. This fixes that issue.

> ... this scenario passes because all non-excepted content reflows.
However, this does not provide the best user experience, and ideally the
styling of the video player would be updated to mitigate the otherwise
unnecessary horizontal scrollbar.

---------

Co-authored-by: Mike Gower <[email protected]>

Author: fstrr

css/base.css

@@ -417,8 +417,8 @@ margin-left:.8em;
 margin-right:.8em;
 }
 
-.example video,
-#examples video
+#examples video,
+figure video
 {
     max-width: 100%;
 }

understanding/21/reflow.html

@@ -44,7 +44,7 @@ <h2>Basic text reflow</h2>
       <p>Users who need to enlarge (zoom) text to read it benefit significantly when it reflows. Regardless of the size of the text, it continues to wrap within the visible viewport. A whole line of text is visible, making it easier for the eye to track from the end of one line to the start of the next. Users only need to scroll in the direction of reading to read additional lines of text.</p>
 
       <figure>
-        <video controls style="max-width:400px" title="A quotation beginning 'It was a dark and stormy night...' becomes larger on the screen, but before a word at the end of a line grows too long to fit in the width of the container, it wraps to the next line.">
+        <video controls style="width:400px;" title="A quotation beginning 'It was a dark and stormy night...' becomes larger on the screen, but before a word at the end of a line grows too long to fit in the width of the container, it wraps to the next line.">
           <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/1e38dab03eb51a7a3462b31d334629df/downloads/default.mp4" type="video/mp4">
         </video>
         <figcaption style="max-width:400px">
@@ -55,7 +55,7 @@ <h2>Basic text reflow</h2>
       <p>This criterion requires non-excepted sections of content that are written in horizontal languages reflow when narrowed to a width equivalent to 320 CSS pixels. Similarly, sections of content that are written in vertical languages (which are not as commonly used on the web and so will be used much less frequently in examples) need to be able to reflow when rendered at a height equivalent to 256 CSS pixels.</p>
 
       <figure>
-        <video controls style="max-width:400px" title="As a window displaying the quotation 'It was a dark and stormy night...' becomes thinner, a word at the end of a line wraps to the next line before it exceeds the width of the window.">
+        <video controls style="width:400px;" title="As a window displaying the quotation 'It was a dark and stormy night...' becomes thinner, a word at the end of a line wraps to the next line before it exceeds the width of the window.">
           <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/77479b1719e53b20b4017c70ba76340c/downloads/default.mp4" type="video/mp4">
         </video>
 
@@ -119,7 +119,7 @@ <h4>Carousels and carousel-like widgets</h4>
         </figure>
 
         <figure>
-          <video controls style="max-width:400px" title="Scrolling through a carousel reveals that its second panel is unable to fully fit within the viewport, requiring horizontal scrolling to read all of its content.">
+          <video controls style="width:400px" title="Scrolling through a carousel reveals that its second panel is unable to fully fit within the viewport, requiring horizontal scrolling to read all of its content.">
             <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/4c6764035775985f80a7911ea638b3eb/downloads/default.mp4" type="video/mp4">
           </video>
           <figcaption>
@@ -133,7 +133,7 @@ <h4>Two column presentation of editing changes</h4>
         <p>Being able to review differences in code, or text, side-by-side can be an instance where a scrolling two-column layout can benefit users.</p>
 
         <figure>
-          <video controls style="max-width:400px" title="Code editor, showing a diff between line 23 in the original code and 22 in the modified code. The differences between the two are presented as two columns, with the original on the left and the modified on the right. Each column can be completely scrolled into view horizontally within a 320 pixel wide viewport. Text within each column can then be read by scrolling only in the vertical direction.">
+          <video controls style="width:400px;" title="Code editor, showing a diff between line 23 in the original code and 22 in the modified code. The differences between the two are presented as two columns, with the original on the left and the modified on the right. Each column can be completely scrolled into view horizontally within a 320 pixel wide viewport. Text within each column can then be read by scrolling only in the vertical direction.">
             <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/cf091ec792c8ba93650ec3311d8058b0/downloads/default.mp4" type="video/mp4">
           </video>