use video tag to embed mp4s

diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/choosing_web_fonts_beginners_guide/content.md b/cc-by-sa/knowledge/modules/choosing_type/lessons/choosing_web_fonts_beginners_guide/content.md
index 4168d55e8367749af102fd2942f3335c39411e84..9bf59876693c77e7bc7e568bfc6b70a86d1817c8 100644 (file)
--- a/cc-by-sa/knowledge/modules/choosing_type/lessons/choosing_web_fonts_beginners_guide/content.md
+++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/choosing_web_fonts_beginners_guide/content.md
@@ -36,7 +36,7 @@ When choosing web fonts, you often have to weigh several considerations together
 
 <figure>
 
-![An animated loop showing the similarities of characters 'a', 'g', and 'o', in a certain font.](images/web-fonts2.mp4)
+<video autoplay muted src="images/web-fonts2.mp4" type="video/mp4"></video>
 
 <figcaption>
 “For a paragraph, which needs to be highly legible, you shouldn’t use something with ambiguous shapes,” says type designer Octavio Pardo. Decorative fonts like <a href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a> (shown above) can be difficult to read at length, so for long texts stick to highly legible “workhorse“ fonts like <a href="https://fonts.google.com/specimen/Alegreya">Alegreya</a> or <a href="https://fonts.google.com/specimen/Bellefair">Bellefair</a>.
@@ -56,7 +56,7 @@ Remember that your app or website will probably reach users all over the world.
 
 <figure>
 
-![An animated loop showing text translated into Czech.](images/web-fonts3.mp4)
+<video autoplay muted src="images/web-fonts3.mp4" type="video/mp4"></video>
 
 <figcaption>
 “Auto-translation as a service makes the chances of someone seeing your content in another language a near certainty,” says type designer Eben Sorkin, whose <a href="https://fonts.google.com/specimen/Merriweather">Merriweather</a> (shown above) has been expanded in recent years to support more European languages, as well as those using the Cyrillic script. “Having the glyphs needed for their language available will help make the user feel catered to,” says Sorkin. “The more global your customers, the more you will probably care about this.”
@@ -68,7 +68,7 @@ In other words, if the font you’ve chosen has only basic Latin letters, auto-t
 
 <figure>
 
-![An animated loop showing text translated into different languages.](images/web-fonts4.mp4)
+<video autoplay muted src="images/web-fonts4.mp4" type="video/mp4"></video>
 
 <figcaption>
 If your principle concern is for a font to remain consistent across the greatest number of scripts possible, consider using the <a href="https://fonts.google.com/noto">Noto</a> font family (shown above).
@@ -94,7 +94,7 @@ And while it’s uncommon for contextual alternates to be considered essential f
 
 <figure>
 
-![An animated loop showing text showing oldstyle and tabular numbers.](images/web-fonts5.mp4)
+<video autoplay muted src="images/web-fonts5.mp4" type="video/mp4"></video>
 
 <figcaption>
 Depending on what’s needed for your project, remember to compare the styles of your font’s figures. The difference between Oldstyle and Tabular styling (shown above), will affect your layout and formatting choices. Tabular figures are often used in tables because each number has the same character width, while Oldstyle figures read more comfortably in paragraphs.