Clean up video styling (microsoft#160461)

mjbvz · web-flow · commit d7d18aa0da52 · 2022-09-08T17:28:14.000-07:00
diff --git a/extensions/image-preview/media/videoPreview.css b/extensions/image-preview/media/videoPreview.css
@@ -3,31 +3,21 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-html, body {
+html {
 	width: 100%;
 	height: 100%;
 	text-align: center;
 }
 
 body {
 	padding: 5px 10px;
-	box-sizing: border-box;
-	-webkit-user-select: none;
-	user-select: none;
-}
-
-.video-container {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.container.loading,
-.container.error {
+	width: calc(100% - 20px);
+	height: calc(100% - 10px);
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 .loading-indicator {
diff --git a/extensions/image-preview/media/videoPreview.js b/extensions/image-preview/media/videoPreview.js
@@ -26,10 +26,6 @@
 	let hasLoadedMedia = false;
 
 	// Elements
-	const container = document.createElement('div');
-	container.className = 'video-container';
-	document.body.appendChild(container);
-
 	const video = document.createElement('video');
 	if (settings.src !== null) {
 		video.src = settings.src;
@@ -44,7 +40,7 @@
 
 		document.body.classList.remove('loading');
 		document.body.classList.add('ready');
-		container.append(video);
+		document.body.append(video);
 	}
 
 	video.addEventListener('error', e => {
diff --git a/extensions/image-preview/src/videoPreview.ts b/extensions/image-preview/src/videoPreview.ts
@@ -79,7 +79,7 @@ class VideoPreview extends MediaPreview {
 	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: ${cspSource}; media-src ${cspSource}; script-src 'nonce-${nonce}'; style-src ${cspSource} 'nonce-${nonce}';">
 	<meta id="settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
 </head>
-<body class="container loading">
+<body class="loading">
 	<div class="loading-indicator"></div>
 	<div class="loading-error">
 		<p>${localize('preview.videoLoadError', "An error occurred while loading the video file.")}</p>
