diff --git a/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6 b/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
index 81bfdf033a0..4439455f12c 100644
--- a/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
+++ b/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") {
diff --git a/app/assets/javascripts/pretty-text/white-lister.js.es6 b/app/assets/javascripts/pretty-text/white-lister.js.es6
index fa711f07f5f..c866c557fa7 100644
--- a/app/assets/javascripts/pretty-text/white-lister.js.es6
+++ b/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",
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index c09bfb54b65..7ec86bc8072 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/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%;
diff --git a/test/javascripts/lib/pretty-text-test.js.es6 b/test/javascripts/lib/pretty-text-test.js.es6
index 8178ad79959..d796eb6eddf 100644
--- a/test/javascripts/lib/pretty-text-test.js.es6
+++ b/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"
   );
 });