FIX: Wrap markdown videos with video-container class to stop post height jumping (#8806)

This will lock video aspect ratio to 16:9 and stop them from making posts jump around on load.

See also discourse/onebox@6f58545 and fe20cb4.

app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6

@@ -144,10 +144,12 @@ export function extractDataAttribute(str) {
 function videoHTML(token) {
   const src = token.attrGet("src");
   const origSrc = token.attrGet("data-orig-src");
-  return `<video width="100%" height="100%" controls>
-    <source src="${src}" data-orig-src="${origSrc}">
-    <a href="${src}">${src}</a>
-  </video>`;
+  return `<div class="video-container">
+    <video width="100%" height="100%" controls>
+      <source src="${src}" data-orig-src="${origSrc}">
+      <a href="${src}">${src}</a>
+    </video>
+  </div>`;
 }
 
 function audioHTML(token) {
@@ -169,6 +171,7 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
 
   // markdown-it supports returning HTML instead of continuing to render the current token
   // see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+  // handles |video and |audio alt transformations for image tags
   if (split[1] === "video") {
     return videoHTML(token);
   } else if (split[1] === "audio") {

app/assets/javascripts/pretty-text/white-lister.js.es6

@@ -188,6 +188,7 @@ export const DEFAULT_LIST = [
   "span[lang]",
   "span.excerpt",
   "div.excerpt",
+  "div.video-container",
   "span.hashtag",
   "span.mention",
   "strike",

app/assets/stylesheets/common/base/onebox.scss

@@ -691,7 +691,8 @@ aside.onebox.stackexchange .onebox-body {
 }
 
 // Force oneboxed videos to 16:9 aspect ratio
-.onebox.video-onebox {
+.onebox.video-onebox,
+.video-container {
   position: relative;
   padding: 0 0 56.25% 0;
   width: 100%;

test/javascripts/lib/pretty-text-test.js.es6

@@ -976,10 +976,12 @@ QUnit.test("images", assert => {
 QUnit.test("video", assert => {
   assert.cooked(
     "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
-    `<p><video width="100%" height="100%" controls>
-    <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
-    <a href="/404">/404</a>
-  </video></p>`,
+    `<p><div class="video-container">
+    <video width="100%" height="100%" controls>
+      <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
+      <a href="/404">/404</a>
+    </video>
+  </div></p>`,
     "It returns the correct video player HTML"
   );
 });