From bb74d688d80638ebef4b0d9de7a15023160793cd Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Wed, 12 Jul 2017 15:20:00 +0100
Subject: [PATCH] better pathing and video pattern

---
 content/patterns/media/_index.md              |   4 +
 .../{writing => media}/including-images.md    |   0
 content/patterns/media/including-videos.md    |   9 +
 docs/index.html                               |  28 +-
 docs/index.xml                                |  14 +-
 docs/patterns/coding/code-blocks/index.html   |  28 +-
 .../coding/codepen-embedding/index.html       |  28 +-
 .../patterns/coding/color-palettes/index.html |  28 +-
 docs/patterns/coding/index.html               |  28 +-
 docs/patterns/coding/tested/index.html        |  32 +-
 .../coding/writing-inline-demos/index.html    |  30 +-
 docs/patterns/index.html                      |  28 +-
 docs/patterns/installation/index.html         |  28 +-
 docs/patterns/library-setup/index.html        |  28 +-
 .../including-images/index.html               |  30 +-
 .../media/including-videos/index.html         | 264 ++++++++++++++++
 docs/patterns/media/index.html                | 281 ++++++++++++++++++
 docs/patterns/media/index.xml                 |  34 +++
 docs/patterns/serving/index.html              |  28 +-
 .../writing/expandable-sections/index.html    |  28 +-
 docs/patterns/writing/index.html              |  38 +--
 docs/patterns/writing/index.xml               |  10 -
 .../writing/library-structure/index.html      |  28 +-
 .../writing/markdown-and-metadata/index.html  |  28 +-
 .../writing/notes-and-warnings/index.html     |  28 +-
 docs/patterns/writing/references/index.html   |  28 +-
 docs/service-worker.js                        |   2 +-
 docs/sitemap.xml                              |  10 +-
 themes/infusion/layouts/_default/baseof.html  |  12 +-
 .../infusion/layouts/shortcodes/tested.html   |   6 +-
 30 files changed, 1008 insertions(+), 160 deletions(-)
 create mode 100644 content/patterns/media/_index.md
 rename content/patterns/{writing => media}/including-images.md (100%)
 create mode 100644 content/patterns/media/including-videos.md
 rename docs/patterns/{writing => media}/including-images/index.html (96%)
 create mode 100644 docs/patterns/media/including-videos/index.html
 create mode 100644 docs/patterns/media/index.html
 create mode 100644 docs/patterns/media/index.xml

diff --git a/content/patterns/media/_index.md b/content/patterns/media/_index.md
new file mode 100644
index 0000000..c586e20
--- /dev/null
+++ b/content/patterns/media/_index.md
@@ -0,0 +1,4 @@
++++
+title = "Media"
+weight = 2
++++
diff --git a/content/patterns/writing/including-images.md b/content/patterns/media/including-images.md
similarity index 100%
rename from content/patterns/writing/including-images.md
rename to content/patterns/media/including-images.md
diff --git a/content/patterns/media/including-videos.md b/content/patterns/media/including-videos.md
new file mode 100644
index 0000000..4ff651a
--- /dev/null
+++ b/content/patterns/media/including-videos.md
@@ -0,0 +1,9 @@
++++
+title = "Including videos"
++++
+
+**Infusion** has a lot of its own shortcodes, but you can still use Hugo's [built in shortcodes](https://gohugo.io/extras/shortcodes#built-in-shortcodes). These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video's `id`.
+
+{{<codeBlock>}}
+&#x7b;{< youtube w7Ft2ymGmfc >}}
+{{</codeBlock>}}
diff --git a/docs/index.html b/docs/index.html
index 380e748..7c092f7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -149,13 +149,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -173,6 +166,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/index.xml b/docs/index.xml
index 270ec37..d33583e 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -87,14 +87,24 @@ The expandable shortcode takes three parameters:
     
     <item>
       <title>Including images</title>
-      <link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
+      <link>https://heydon.github.io/infusion/patterns/media/including-images/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
       <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
 ├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
     </item>
     
+    <item>
+      <title>Including videos</title>
+      <link>https://heydon.github.io/infusion/patterns/media/including-videos/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/media/including-videos/</guid>
+      <description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id.
+&amp;#x7b;{}}  </description>
+    </item>
+    
     <item>
       <title>Installation</title>
       <link>https://heydon.github.io/infusion/patterns/installation/</link>
diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html
index ca9bcc1..ecac542 100644
--- a/docs/patterns/coding/code-blocks/index.html
+++ b/docs/patterns/coding/code-blocks/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/coding/codepen-embedding/index.html b/docs/patterns/coding/codepen-embedding/index.html
index ed12358..92b699a 100644
--- a/docs/patterns/coding/codepen-embedding/index.html
+++ b/docs/patterns/coding/codepen-embedding/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html
index 4b31ab8..68289ce 100644
--- a/docs/patterns/coding/color-palettes/index.html
+++ b/docs/patterns/coding/color-palettes/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html
index a86125b..e9c0134 100644
--- a/docs/patterns/coding/index.html
+++ b/docs/patterns/coding/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index 4db67bf..58d9329 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
@@ -248,6 +262,7 @@
           
           
           
+          
           <img src="https://heydon.github.io/infusion/images/browser-Firefox-Android.svg" alt="">
           <span><strong>Firefox Android</strong></span>
           <span class="additional">with <strong>Talkback</strong></span>
@@ -257,6 +272,7 @@
       <td>
         
           
+          
           <img src="https://heydon.github.io/infusion/images/browser-Chrome.svg" alt="">
           <span><strong>Chrome</strong></span>
         
@@ -267,6 +283,7 @@
           
           
           
+          
           <img src="https://heydon.github.io/infusion/images/browser-Safari-iOS.svg" alt="">
           <span><strong>Safari iOS</strong></span>
           <span class="additional">with <strong>Voiceover</strong></span>
@@ -276,6 +293,7 @@
       <td>
         
           
+          
           <img src="https://heydon.github.io/infusion/images/browser-Edge.svg" alt="">
           <span><strong>Edge</strong></span>
         
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index b7539f4..4010581 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
@@ -346,7 +360,7 @@ toggle.addEventListener('click', (e) => {
 </code></pre>
 
 
-<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/including-images/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
+<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
   </main>
 
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index 5741eb9..c13c13b 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 3873493..4d18d91 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index c45d9d2..cee8771 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/including-images/index.html b/docs/patterns/media/including-images/index.html
similarity index 96%
rename from docs/patterns/writing/including-images/index.html
rename to docs/patterns/media/including-images/index.html
index a620a05..dddeaf7 100644
--- a/docs/patterns/writing/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/writing/including-images/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/including-images/">
     <link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" aria-current="page">
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" aria-current="page">
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
new file mode 100644
index 0000000..25a0b8a
--- /dev/null
+++ b/docs/patterns/media/including-videos/index.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/including-videos/">
+    <link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="https://heydon.github.io/infusion/images/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png">
+    <link rel="manifest" href="https://heydon.github.io/infusion/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
+    <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    <title>
+      
+        Including videos | Infusion
+      
+    </title>
+  </head>
+  <body>
+    <a href="#main">skip to content</a>
+    <svg style="display: none">
+  <symbol id="bookmark">
+   <g transform="translate(2266 3206.2)">
+    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
+   </g>
+  </symbol>
+
+  <symbol id="w3c">
+   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
+   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
+ </symbol>
+
+  <symbol id="tag">
+    <g transform="translate(0 -875.2)">
+     <path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
+    </g>
+  </symbol>
+
+  <symbol id="balloon">
+   <g transform="translate(0 -875.2)">
+    <g>
+     <path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
+     <path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
+     <path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
+     <path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
+     <path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
+     <rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
+    </g>
+   </g>
+  </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
+</svg>
+
+    <div class="wrapper">
+      <header class="intro-and-nav" role="banner">
+        <div>
+          <div class="intro">
+            <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
+              <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
+            </a>
+            <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
+          </div>
+          <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
+            
+            
+              <ul id="patterns-list">
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/installation/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Installation</span>
+                    </a>
+                  </li>
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Library setup</span>
+                    </a>
+                  </li>
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/serving/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Serving</span>
+                    </a>
+                  </li>
+                
+                
+                  <li>
+                    <h3>Writing</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Library structure</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Markdown &amp; metadata</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Expandable sections</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Notes &amp; warnings</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">References</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" aria-current="page">
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+                  <li>
+                    <h3>Coding</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Color palettes</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Tested using...</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+              </ul>
+            
+          </nav>
+        </div>
+      </header>
+      <div class="main-and-footer">
+        <div>
+          
+  <main id="main">
+    <h1>Including videos</h1>
+    
+    <p><strong>Infusion</strong> has a lot of its own shortcodes, but you can still use Hugo&rsquo;s <a href="https://gohugo.io/extras/shortcodes#built-in-shortcodes">built in shortcodes</a>. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&rsquo;s <code>id</code>.</p>
+
+<pre class=" "><code  data-codeblock-shortcode>
+&#x7b;{< youtube w7Ft2ymGmfc >}}
+</code></pre>
+
+
+  </main>
+
+          <footer role="contentinfo">
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            For general enquiries, contact us on info@paciellogroup.com.
+          </footer>
+        </div>
+      </div>
+    </div>
+    
+      <script src="https://heydon.github.io/infusion/js/prism.js"></script>
+    
+    <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
+  </body>
+</html>
diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html
new file mode 100644
index 0000000..194156c
--- /dev/null
+++ b/docs/patterns/media/index.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/media/">
+    <link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="https://heydon.github.io/infusion/images/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png">
+    <link rel="manifest" href="https://heydon.github.io/infusion/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
+    <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    <title>
+      
+        Media | Infusion
+      
+    </title>
+  </head>
+  <body>
+    <a href="#main">skip to content</a>
+    <svg style="display: none">
+  <symbol id="bookmark">
+   <g transform="translate(2266 3206.2)">
+    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
+   </g>
+  </symbol>
+
+  <symbol id="w3c">
+   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
+   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
+ </symbol>
+
+  <symbol id="tag">
+    <g transform="translate(0 -875.2)">
+     <path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
+    </g>
+  </symbol>
+
+  <symbol id="balloon">
+   <g transform="translate(0 -875.2)">
+    <g>
+     <path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
+     <path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
+     <path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
+     <path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
+     <path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
+     <rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
+    </g>
+   </g>
+  </symbol>
+
+  <symbol id="info">
+   <g transform="translate(-37.035 -1004.6)">
+    <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
+    <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
+     <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
+     <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+    </g>
+   </g>
+ </symbol>
+
+ <symbol id="warning">
+  <g transform="translate(-1.1273 -1010.2)">
+   <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
+   <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
+   <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
+  </g>
+</symbol>
+</svg>
+
+    <div class="wrapper">
+      <header class="intro-and-nav" role="banner">
+        <div>
+          <div class="intro">
+            <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
+              <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
+            </a>
+            <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
+          </div>
+          <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
+            
+            
+              <ul id="patterns-list">
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/installation/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Installation</span>
+                    </a>
+                  </li>
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Library setup</span>
+                    </a>
+                  </li>
+                
+                  <li class="pattern">
+                    <a href="https://heydon.github.io/infusion/patterns/serving/" >
+                      <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <span class="text">Serving</span>
+                    </a>
+                  </li>
+                
+                
+                  <li>
+                    <h3>Writing</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Library structure</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Markdown &amp; metadata</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Expandable sections</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Notes &amp; warnings</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">References</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+                  <li>
+                    <h3>Coding</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Code blocks</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">CodePen embedding</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Writing inline demos</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Color palettes</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Tested using...</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
+              </ul>
+            
+          </nav>
+        </div>
+      </header>
+      <div class="main-and-footer">
+        <div>
+          
+  <main id="main">
+    <h1>
+      Media
+    </h1>
+    <ul class="patterns-list">
+      
+          <li>
+  <h2>
+    <a href="https://heydon.github.io/infusion/patterns/media/including-images/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      Including images
+    </a>
+  </h2>
+</li>
+
+      
+          <li>
+  <h2>
+    <a href="https://heydon.github.io/infusion/patterns/media/including-videos/">
+      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      Including videos
+    </a>
+  </h2>
+</li>
+
+      
+    </ul>
+  </main>
+
+          <footer role="contentinfo">
+            Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>.
+            For general enquiries, contact us on info@paciellogroup.com.
+          </footer>
+        </div>
+      </div>
+    </div>
+    
+      <script src="https://heydon.github.io/infusion/js/prism.js"></script>
+    
+    <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
+    
+  </body>
+</html>
diff --git a/docs/patterns/media/index.xml b/docs/patterns/media/index.xml
new file mode 100644
index 0000000..128be48
--- /dev/null
+++ b/docs/patterns/media/index.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Media on Infusion</title>
+    <link>https://heydon.github.io/infusion/patterns/media/</link>
+    <description>Recent content in Media on Infusion</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    
+	<atom:link href="https://heydon.github.io/infusion/patterns/media/index.xml" rel="self" type="application/rss+xml" />
+    
+    
+    <item>
+      <title>Including images</title>
+      <link>https://heydon.github.io/infusion/patterns/media/including-images/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
+      <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
+├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
+    </item>
+    
+    <item>
+      <title>Including videos</title>
+      <link>https://heydon.github.io/infusion/patterns/media/including-videos/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>https://heydon.github.io/infusion/patterns/media/including-videos/</guid>
+      <description>Infusion has a lot of its own shortcodes, but you can still use Hugo&amp;rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&amp;rsquo;s id.
+&amp;#x7b;{}}  </description>
+    </item>
+    
+  </channel>
+</rss>
\ No newline at end of file
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index 3b91e2e..585c551 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index d10be1e..eb6c4fc 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index 9496cf3..56cfd2c 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
@@ -258,16 +272,6 @@
 </li>
 
       
-          <li>
-  <h2>
-    <a href="https://heydon.github.io/infusion/patterns/writing/including-images/">
-      <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-      Including images
-    </a>
-  </h2>
-</li>
-
-      
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml
index 5044de4..da71deb 100644
--- a/docs/patterns/writing/index.xml
+++ b/docs/patterns/writing/index.xml
@@ -41,16 +41,6 @@ The expandable shortcode takes three parameters:
  label — This is the label for the the section heading. level — This is the heading level (e.</description>
     </item>
     
-    <item>
-      <title>Including images</title>
-      <link>https://heydon.github.io/infusion/patterns/writing/including-images/</link>
-      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
-      
-      <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
-      <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
-├── content └── static └── images ├── logo.png └── menu-button.gif     When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
-    </item>
-    
     <item>
       <title>Notes &amp; warnings</title>
       <link>https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/</link>
diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html
index a2de874..e6e5a0c 100644
--- a/docs/patterns/writing/library-structure/index.html
+++ b/docs/patterns/writing/library-structure/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html
index d6bfebc..fee9c3a 100644
--- a/docs/patterns/writing/markdown-and-metadata/index.html
+++ b/docs/patterns/writing/markdown-and-metadata/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index 4a3ca07..3b9018f 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html
index 71f8c3b..c07bd47 100644
--- a/docs/patterns/writing/references/index.html
+++ b/docs/patterns/writing/references/index.html
@@ -148,13 +148,6 @@
                           </a>
                         </li>
                       
-                        <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/writing/including-images/" >
-                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">Including images</span>
-                          </a>
-                        </li>
-                      
                         <li class="pattern">
                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
                             <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -172,6 +165,27 @@
                     </ul>
                   </li>
                 
+                  <li>
+                    <h3>Media</h3>
+                    <ul>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including images</span>
+                          </a>
+                        </li>
+                      
+                        <li class="pattern">
+                          <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
+                            <svg class="bookmark-icon" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                            <span class="text">Including videos</span>
+                          </a>
+                        </li>
+                      
+                    </ul>
+                  </li>
+                
                   <li>
                     <h3>Coding</h3>
                     <ul>
diff --git a/docs/service-worker.js b/docs/service-worker.js
index 4fb04fe..8180cee 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","36494dc390f7119da0cadcad11138bb4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","d12796210e859afaea270090f640c3d9"],["index.xml","74d031827892612b4be9cd599fbdb36f"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","0f940a045b0498ae092e051ead056b19"],["patterns/coding/codepen-embedding/index.html","ea2bc40237f291a565dbb6b44f356e91"],["patterns/coding/color-palettes/index.html","ff45987631205be01d24cfa234ddee9e"],["patterns/coding/index.html","6500fba75018e8521b5679facafa26f8"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","1baf032689003f0371ad7da2a65fc350"],["patterns/coding/writing-inline-demos/index.html","f0d84bc47e8eb14cbcab9682065dfca5"],["patterns/index.html","a403abadb7c7ba35f28bc9906c0fbdf0"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","07ad352654b14a5edddeeac7575496c2"],["patterns/library-setup/index.html","abcfabfad0c000a646440248c13d298e"],["patterns/serving/index.html","37dd0862f6700c588026a7a801503a2f"],["patterns/writing/expandable-sections/index.html","d48326b0a63fa003366d17d1e8836194"],["patterns/writing/including-images/index.html","b47a7c1d655af7713277cadb70947d05"],["patterns/writing/index.html","75c951da20d3347354d0f8961007924f"],["patterns/writing/index.xml","865db6ba800170f1efc2e8a2413e4b36"],["patterns/writing/library-structure/index.html","0a8fad8b66024eadc8316c620c20de9b"],["patterns/writing/markdown-and-metadata/index.html","f37589e3151a2a4ad604d4ce9767127f"],["patterns/writing/notes-and-warnings/index.html","96179ef02d7cd03a8293452569195f11"],["patterns/writing/references/index.html","0e9cae4a13077a02e0e56cf6a56fe950"],["sitemap.xml","1797bd7bb5cd23a161415b194580572c"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","36494dc390f7119da0cadcad11138bb4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","3cfef7dae92dac6b5b8d506dcf53cf77"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","51ce834e0e837de71dc10e681af72356"],["patterns/coding/codepen-embedding/index.html","752220c925f3410448e6c257570d146b"],["patterns/coding/color-palettes/index.html","f9f012948693da24289028cc594f8485"],["patterns/coding/index.html","11f94b14bb3d572636ab7cb8043f68a0"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","c921e2dccaf080d160c8bcc9fc14c6f5"],["patterns/coding/writing-inline-demos/index.html","ff0a5c9d2ce6517091541b37f8d5517f"],["patterns/index.html","24a688e40ef85a33e4941ac6b784ca43"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","0c11aad5effd4b091c4a7559b3487182"],["patterns/library-setup/index.html","89659b1d4da7511dfa709b31ea2226b0"],["patterns/media/including-images/index.html","f67a915d1784fb6e497b6f1255f3c7e2"],["patterns/media/including-videos/index.html","62b4d7920a6a5f577775254fcc2a4205"],["patterns/media/index.html","d530e9377afea71651c5864a6ee0c057"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","309bc3b476291bb86886c3c5271facb8"],["patterns/writing/expandable-sections/index.html","7487327b298a1d48472ad7c211aed793"],["patterns/writing/index.html","5d916eb9e898ce1bd0cfcd12b65dfe35"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","8e885dc4fbbf65415548479bcad89454"],["patterns/writing/markdown-and-metadata/index.html","26e5076792abaf67c0204ed373c7b528"],["patterns/writing/notes-and-warnings/index.html","472fb071ee0ecf7aa4963c4680579b0f"],["patterns/writing/references/index.html","4c999f988613ae0b994752ae3bb24175"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index 61b7912..a3fb79e 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -18,6 +18,10 @@
     <loc>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</loc>
   </url>
   
+  <url>
+    <loc>https://heydon.github.io/infusion/patterns/media/</loc>
+  </url>
+  
   <url>
     <loc>https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/</loc>
   </url>
@@ -49,7 +53,11 @@
   </url>
   
   <url>
-    <loc>https://heydon.github.io/infusion/patterns/writing/including-images/</loc>
+    <loc>https://heydon.github.io/infusion/patterns/media/including-images/</loc>
+  </url>
+  
+  <url>
+    <loc>https://heydon.github.io/infusion/patterns/media/including-videos/</loc>
   </url>
   
   <url>
diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html
index 696470d..635e7e9 100644
--- a/themes/infusion/layouts/_default/baseof.html
+++ b/themes/infusion/layouts/_default/baseof.html
@@ -22,8 +22,8 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/prism.css" />
-    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/styles.css">
+    <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" />
+    <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
     <title>
       {{ block "title" . }}
         {{ .Title }} | {{ .Site.Title }}
@@ -38,7 +38,7 @@
         <div>
           <div class="intro">
             <a class="logo" href="/" aria-label="{{ .Site.Title }} pattern library home page">
-              <img src="{{ .Site.BaseURL }}images/logo.png" alt="">
+              <img src="{{ "images/logo.png" | absURL }}" alt="">
             </a>
             <p class="library-desc">{{ .Site.Params.Description | markdownify }}</p>
           </div>
@@ -87,11 +87,11 @@
       </div>
     </div>
     {{ if eq .Type "patterns" }}
-      <script src="{{ .Site.BaseURL }}js/prism.js"></script>
+      <script src="{{ "js/prism.js" | absURL }}"></script>
     {{ end }}
-    <script src="{{ .Site.BaseURL }}js/dom-scripts.js"></script>
+    <script src="{{ "js/dom-scripts.js" | absURL }}"></script>
     {{ if .Page.IsHome }}
-      <script src="{{ .Site.BaseURL }}js/service-worker-registration.js"></script>
+      <script src="{{ "js/service-worker-registration.js" | absURL }}"></script>
     {{ end }}
   </body>
 </html>
diff --git a/themes/infusion/layouts/shortcodes/tested.html b/themes/infusion/layouts/shortcodes/tested.html
index 02e1da7..636f38d 100644
--- a/themes/infusion/layouts/shortcodes/tested.html
+++ b/themes/infusion/layouts/shortcodes/tested.html
@@ -10,12 +10,14 @@
           {{ $parts := split . "+" }}
           {{ $browser := index $parts 0 }}
           {{ $additional := index $parts 1 }}
-          <img src="{{ $.Site.BaseURL }}images/browser-{{ replace $browser " " "-" }}.svg" alt="">
+          {{ $slug := replace $browser " " "-" }}
+          <img src="{{ (printf "images/browser-%s" $slug) | absURL }}.svg" alt="">
           <span><strong>{{ $browser }}</strong></span>
           <span class="additional">with <strong>{{ $additional }}</strong></span>
         {{ else }}
           {{ $browser := . }}
-          <img src="{{ $.Site.BaseURL }}images/browser-{{ replace $browser " " "-" }}.svg" alt="">
+          {{ $slug := replace $browser " " "-" }}
+          <img src="{{ (printf "images/browser-%s" $slug) | absURL }}.svg" alt="">
           <span><strong>{{ $browser }}</strong></span>
         {{ end }}
       </td>