Migrate Reflow videos out of repository (#4308)

Resolves #768

Alternative to #4304 that instead migrates videos to W3C's Cloudflare
Stream account. The videos have been marked as downloadable, so they can
be embedded identically to how they were before.

In addition to removing the mp4s from the repo, I've cleaned up a
commented-out gif, and made sure each video has alternative text.

(Note that although the videos are removed, they are still in git
history and thus still consume space; the intent is for this to be the
pattern going forward and to avoid adding more mp4 files to the
repository.)


[Preview](https://deploy-preview-4308--wcag2.netlify.app/understanding/reflow)

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

Author: kfranqueiro

Diff for: understanding/21/img/carousel-fail.mp4

@@ -45,7 +45,7 @@ <h2>Basic text reflow</h2>
 
       <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.">
-          <source src="img/reflow-text-resize.mp4" type="video/mp4">
+          <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/1e38dab03eb51a7a3462b31d334629df/downloads/default.mp4" type="video/mp4">
         </video>
         <figcaption style="max-width:400px">
           <p>As text is resized, the words wrap so that the text lines do not exceed the viewport. (This quick demo to 200% is not intended to illustrate a test for conformance.)</p>
@@ -56,7 +56,7 @@ <h2>Basic text reflow</h2>
 
       <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.">
-          <source src="img/reflow-container-resize.mp4" type="video/mp4">
+          <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/77479b1719e53b20b4017c70ba76340c/downloads/default.mp4" type="video/mp4">
         </video>
 
         <figcaption style="max-width:400px">
@@ -119,8 +119,8 @@ <h4>Carousels and carousel-like widgets</h4>
         </figure>
 
         <figure>
-          <video controls style="max-width:400px">
-            <source src="img/carousel-fail.mp4" type="video/mp4">
+          <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.">
+            <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/4c6764035775985f80a7911ea638b3eb/downloads/default.mp4" type="video/mp4">
           </video>
           <figcaption>
             <p>Fail: In this modified version of the previous carousel, the second panel's content <strong>does not</strong> fit within the 320 CSS pixel viewport.</p>
@@ -133,12 +133,10 @@ <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">
-            <source src="img/code-view-columns.mp4" type="video/mp4">
+          <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.">
+            <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/cf091ec792c8ba93650ec3311d8058b0/downloads/default.mp4" type="video/mp4">
           </video>
 
-          <!-- <img src="img/code-diff.gif" alt="code editor, showing code lines 20 to 24. The differences between the original code and the modified code are presented as two columns, with the original on the left and the modified on the right. This animated gif demonstrates horizontally scrolling each column of code into view - within a 320 pixel wide viewport - where vertical scrolling is used to show that the full text of each column can then be read by scrolling in a single direction."> -->
-
           <figcaption>
             <p>Pass: An interface to review code/document changes provides a two-column comparison between the original and modified content. Each column fits within a 320 CSS pixel wide container and a horizontal scrollbar can be used to position each column into the visible viewport.</p>
 
@@ -330,7 +328,9 @@ <h2>Examples</h2>
           <ul>
             <li>
               <strong>One column view in responsive design</strong>
-              <p><video controls="controls"><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.mp4" type="video/mp4" /><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.ogv" type="video/ogg" />Animation of zooming in on a responsive site. The content reflows to fit the screen.</video></p>
+              <p><video controls="controls" title="Animation of zooming in on a responsive site. The content reflows to fit the screen.">
+                <source src="https://customer-0kix77mxh2zzzae0.cloudflarestream.com/a0b687e5885590640e8735d83676842d/downloads/default.mp4" type="video/mp4" />
+              </video></p>
               <p>Note that as the zoom percentage increases, the navigation changes first to hide options behind a &quot;More&quot; dropdown menu. As zooming continues, most navigation options are eventually behind a &quot;hamburger&quot; menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.</p>
             </li>
             <li>