diff --git a/img/flexible-layouts/layouts-flex-list.mp4 b/img/flexible-layouts/layouts-flex-list.mp4
new file mode 100644
index 0000000..1723f2b
Binary files /dev/null and b/img/flexible-layouts/layouts-flex-list.mp4 differ
diff --git a/img/flexible-layouts/layouts-flex-list.png b/img/flexible-layouts/layouts-flex-list.png
new file mode 100644
index 0000000..3e79b61
Binary files /dev/null and b/img/flexible-layouts/layouts-flex-list.png differ
diff --git a/img/flexible-layouts/layouts-flex-wrap.mp4 b/img/flexible-layouts/layouts-flex-wrap.mp4
new file mode 100644
index 0000000..01cd373
Binary files /dev/null and b/img/flexible-layouts/layouts-flex-wrap.mp4 differ
diff --git a/img/flexible-layouts/layouts-flex-wrap.png b/img/flexible-layouts/layouts-flex-wrap.png
new file mode 100644
index 0000000..ea5e43f
Binary files /dev/null and b/img/flexible-layouts/layouts-flex-wrap.png differ
diff --git a/user-guide/flexible-layouts/index.njk b/user-guide/flexible-layouts/index.njk
index 6e411b5..0cb6885 100644
--- a/user-guide/flexible-layouts/index.njk
+++ b/user-guide/flexible-layouts/index.njk
@@ -107,11 +107,19 @@ title: 08· Flexible Layouts
 
 <h4>How to create a list</h4>
 <p>Extremely useful for ordering list items. Remember to set <strong>fit height</strong> to the container so it can adapt to the number of items.</p>
-<p><img src="/img/flexlayout-list.gif" alt="Flex Layout" /></p>
+<figure>
+  <video title="Creating a list with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-list.png" height="auto">
+    <source src="/img/flexible-layouts/layouts-flex-list.mp4" type="video/mp4">
+  </video>
+</figure>
 
 <h4>Wrapping elements</h4>
 <p>Use the <strong>wrap</strong> property along with <strong>row</strong> direction to get the elements positioned in multiple lines.</p>
-<p><img src="/img/flexlayout-wrap.gif" alt="Flex Layout" /></p>
+<figure>
+  <video title="Wrapping elements with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-wrap.png" height="auto">
+    <source src="/img/flexible-layouts/layouts-flex-wrap.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
 <h2 id="layouts-grid">Grid Layout</h2>