Fix video width overflow in markdown, and other changes to match img (#24834)

This change makes the CSS for `<video>` in markup match that of `<img>`,
and also allows additional attributes to be used. This way the width,
padding, alignment should work equally well for both.

2 files changed, 18 insertions, 8 deletions

diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index a0c9ee171f..59cde61a68 100644
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -132,7 +132,7 @@ func createDefaultPolicy() *bluemonday.Policy {
 		"div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote",
 		"dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary",
 		"details", "caption", "figure", "figcaption",
-		"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "wbr",
+		"abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "video", "wbr",
 	}
 
 	policy.AllowAttrs(generalSafeAttrs...).OnElements(generalSafeElements...)
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 5b2d6ef244..fb1e8ea630 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -301,7 +301,8 @@
   background-color: var(--color-markup-table-row);
 }
 
-.markup img {
+.markup img,
+.markup video {
   max-width: 100%;
   box-sizing: initial;
 }
@@ -309,17 +310,23 @@
 /* this background ensures images can break <hr>. We can only do this on
    cases where the background is known and not transparent. */
 .markup.file-view img,
+.markup.file-view video,
 .comment-body .markup img, /* regular comment */
+.comment-body .markup video,
 .comment-content .markup img, /* code comment */
-.wiki .markup img {
+.comment-content .markup video,
+.wiki .markup img,
+.wiki .markup video {
   background: var(--color-box-body);
 }
 
-.markup img[align="right"] {
+.markup img[align="right"],
+.markup video[align="right"] {
   padding-left: 20px;
 }
 
-.markup img[align="left"] {
+.markup img[align="left"],
+.markup video[align="left"] {
   padding-right: 20px;
 }
 
@@ -343,7 +350,8 @@
   border: 1px solid var(--color-secondary);
 }
 
-.markup span.frame span img {
+.markup span.frame span img,
+.markup span.frame span video {
   display: block;
   float: left;
 }
@@ -368,7 +376,8 @@
   text-align: center;
 }
 
-.markup span.align-center span img {
+.markup span.align-center span img
+.markup span.align-center span video {
   margin: 0 auto;
   text-align: center;
 }
@@ -386,7 +395,8 @@
   text-align: right;
 }
 
-.markup span.align-right span img {
+.markup span.align-right span img,
+.markup span.align-right span video {
   margin: 0;
   text-align: right;
 }