Migrate Reflow videos to WAI Understanding WCAG YouTube account

Author: kfranqueiro

_includes/youtube.html

@@ -0,0 +1,34 @@
+{% comment %}
+<!-- (HTML comment markup included to avoid confusing syntax highlighting)
+
+Based on https://adrianroselli.com/2024/01/embed-slides-youtube-videos-and-more.html#YouTube
+
+Inputs:
+- src, height, width = respective attribute values from YouTube's embed code
+- title = Desired title attribute value
+
+Procedure:
+1. Go to YouTube video page
+2. Right-click the video, then choose "Copy video embed code"
+3. Paste the code where you want to insert the video
+4. Replace `<iframe` with `{% include "youtube.html",`
+5. For each of width, height, and src, replace the `=` with `: ` and add `, ` after
+   - e.g. `width: "...", height: "...", src: "...", `
+6. Delete the remaining embed code, and add `title: "..."` with your desired text alternative
+7. End with ` %}`
+
+(Backticks are used as delimiters in the above instructions; do not include them in your code.)
+-->
+{% endcomment %}
+{% assign embedId = src | replace: "https://www.youtube.com/embed/", "" %}
+{% assign embedUrl = "https://www.youtube-nocookie.com/embed/" | append: embedId | append: "?autoplay=1&mute=1&rel=0" %}
+<iframe
+   title="{{ title | escape }}"
+   style="aspect-ratio: {{ width }} / {{ height }}; max-width: 400px;"
+   width="{{ width }}"
+   src="{{ embedUrl }}"
+   allow="autoplay"
+   allowfullscreen
+   loading="lazy"
+   srcdoc="&lt;style&gt;body{background-image:url(https://i3.ytimg.com/vi/{{ embedId }}/hqdefault.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;display:grid;place-items:center;min-height:97dvh;overflow:hidden;}a{display:block;width:96px;height:96px;overflow:hidden;}a:focus{outline:none;}a:focus circle,a:hover circle{fill:#000;}a:focus circle:first-child + circle,a:hover circle:first-child + circle{stroke-dasharray:.4,.4;}a:focus polygon,a:hover polygon{stroke:#fff;stroke-width:.75;}&lt;/style&gt;&lt;a href='{{ embedUrl }}'&gt;&lt;svg viewBox='0 0 16 16' width='96' height='96' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'&gt;&lt;circle cx='50%' cy='50%' r='7.75' fill='none' stroke='#000' stroke-width='.5'/&gt;&lt;circle cx='50%' cy='50%' r='7.25' fill='none' stroke='#fff' stroke-width='.5'/&gt;&lt;circle cx='50%' cy='50%' r='7' fill='#0009'/&gt;&lt;polygon points='12, 8 6, 4.5 6, 11.5' fill='#fff' stroke-linejoin='round'&gt;&lt;/polygon&gt;&lt;/svg&gt;Play&lt;/a&gt;"
+   {{ attribs }}></iframe>

understanding/21/img/carousel-fail.mp4

@@ -44,9 +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.">
-          <source src="img/reflow-text-resize.mp4" type="video/mp4">
-        </video>
+        {% include "youtube.html", width: "1038", height: "584", src: "https://www.youtube.com/embed/5oHRHMpezyc", 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." %}
         <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>
         </figcaption>
@@ -55,10 +53,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.">
-          <source src="img/reflow-container-resize.mp4" type="video/mp4">
-        </video>
-
+        {% include "youtube.html", width: "1038", height: "584", src: "https://www.youtube.com/embed/N6kIiLHAH3k", 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." %}
         <figcaption style="max-width:400px">
           <p>As the container for the text is reduced in width, the words wrap so that the text lines do not exceed the container width. (This quick demo is not intended to illustrate a test for conformance.)
         </figcaption>
@@ -119,9 +114,7 @@ <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>
+          {% include "youtube.html", width: "597", height: "584", src: "https://www.youtube.com/embed/67fh_MUydhw", 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." %}
           <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>
           </figcaption>
@@ -133,11 +126,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">
-            <source src="img/code-view-columns.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."> -->
+          {% include "youtube.html", width: "659", height: "584", src: "https://www.youtube.com/embed/OpeC70mJBaM", 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." %}
 
           <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 +319,7 @@ <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>{% include "youtube.html", width: "978", height: "584", src: "https://www.youtube.com/embed/fWRL6NtHvZQ", title: "Animation of zooming in on a responsive site. The content reflows to fit the screen." %}</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>