add video to typscript

src/articles/typescript-redistributingLabor.md

@@ -58,7 +58,8 @@ macros enable the editors to select a part of the text and apply custom
 styles (see image below).</li> 
 <li>The newly styled MS Word files are then pushed through the review cycle featuring the copy editor and author(s).</li>
 </ol>
-<figure id="attachment_1783" aria-describedby="caption-attachment-1783" style="width: 840px" class="wp-caption alignnone"><img loading="lazy" class="size-large wp-image-1783" src="/images/uploads/Word-styles_screen-shot-2016-12-06-at-5_003.png" alt="MS Word with custom styling macros" srcset="/images/uploads/Word-styles_screen-shot-2016-12-06-at-5_003.png 1024w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5_007.png 150w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5_002.png 300w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5_006.png 768w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5_005.png 1320w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5_004.png 1200w, /images/uploads/Word-styles_screen-shot-2016-12-06-at-5.png 1325w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" width="840" height="835"><figcaption id="caption-attachment-1783" class="wp-caption-text">MS Word with custom styling macros</figcaption></figure>
+
+
 <p>Step 2, styling, is a long manual process. Also, it can&nbsp;<em>only occur</em>
  on computers that have these macros installed. Further, the subsequent 
 edits by the copy editor and author(s) might revert some styling 
@@ -98,9 +99,18 @@ constrain authors from using ‘font size 12, bold’ instead of marking the
  applied by the author, and described&nbsp;in the XML, are erratic at 
 best.</li>
 </ol>
+
+<figure>
+ <video width="320" height="240" controls>
+      <source src="/images/uploads/demo-docx-extract.mp4" type=video/mp4>
+    </video>
+</figure>
 <p>Number 2 is the big problem, and issue number 1 helps obfuscate it.</p>
-<div style="width: 640px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
-<span class="mejs-offscreen">Video Player</span><div id="mep_0" class="mejs-container mejs-container-keyboard-inactive wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Video Player" style="width: 640px; height: 360px; min-width: 217px;"><div class="mejs-inner"><div class="mejs-mediaelement"><mediaelementwrapper id="video-1776-1"><video class="wp-video-shortcode" id="video-1776-1_html5" poster="https://www.adamhyde.net/wp-content/uploads/2017/01/snap.png" preload="metadata" style="width: 640px; height: 360px;" src="/images/uploads/demo-docx-extract.ogv" width="640" height="360"><source type="video/ogg" src="/images/uploads/demo-docx-extract.ogv"><a href="https://www.adamhyde.net/wp-content/uploads/2017/01/demo-docx-extract.ogv">https://www.adamhyde.net/wp-content/uploads/2017/01/demo-docx-extract.ogv</a></video></mediaelementwrapper></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="background-image: url(&quot;https://www.adamhyde.net/wp-content/uploads/2017/01/snap.png&quot;); width: 100%; height: 100%;"><img class="mejs-poster-img" src="/images/uploads/snap.png" width="0" height="0"></div><div style="width: 100%; height: 100%; display: none;" class="mejs-overlay mejs-layer"><div class="mejs-overlay-loading"><span class="mejs-overlay-loading-bg-img"></span></div></div><div style="display: none; width: 100%; height: 100%;" class="mejs-overlay mejs-layer"><div class="mejs-overlay-error"></div></div><div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 100%;"><div class="mejs-overlay-button" role="button" tabindex="0" aria-label="Play" aria-pressed="false"></div></div></div><div class="mejs-controls"><div class="mejs-button mejs-playpause-button mejs-play"><button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button></div><div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span></div><div class="mejs-time-rail"><span class="mejs-time-total mejs-time-slider" role="slider" tabindex="0" aria-label="Time Slider" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="00:00"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded"></span><span class="mejs-time-current" style="transform: scaleX(0);"></span><span class="mejs-time-hovered no-hover"></span><span class="mejs-time-handle" style="transform: translateX(0px);"><span class="mejs-time-handle-content"></span></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span></div><div class="mejs-time mejs-duration-container"><span class="mejs-duration">00:21</span></div><div class="mejs-button mejs-volume-button mejs-mute"><button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute" tabindex="0"></button><a href="javascript:void(0);" class="mejs-volume-slider" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" role="slider" aria-orientation="vertical" aria-valuenow="80" aria-valuetext="80%"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-volume-total"><div class="mejs-volume-current" style="bottom: 0px; height: 80%;"></div><div class="mejs-volume-handle" style="bottom: 80%; margin-bottom: -3px;"></div></div></a></div><div class="mejs-button mejs-fullscreen-button"><button type="button" aria-controls="mep_0" title="Fullscreen" aria-label="Fullscreen" tabindex="0"></button></div></div></div></div></div>
+
+
+
+
+
 <p>So, when you want to transfer from docx to HTML, it is very difficult
  to determine the author’s strucural intent without looking at the 
 original display version of the MS Word file. Is this indented single 

static/css/theme-coko/main.css

@@ -264,6 +264,8 @@ article video {
 }
 article video {
   width: 100%;
+  height: auto;
+  margin: 4em 0;
 }
 article blockquote p {
   border-left: 0px;
@@ -635,7 +637,8 @@ footer section.infos a:hover {
   font-size: 1.2em;
   font-weight: 300;
 }
-.article-single .post-content p {
+.article-single .post-content p ,
+.article-single .post-content li {
   font-weight: 300;
 }
 .footertagline {