diff --git a/webview-sample/src/extension.ts b/webview-sample/src/extension.ts
index d2b6e26b..77d051e9 100644
--- a/webview-sample/src/extension.ts
+++ b/webview-sample/src/extension.ts
@@ -176,10 +176,12 @@ class CatCodingPanel {
 		// Local path to css styles
 		const styleResetPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css');
 		const stylesPathMainPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css');
+		const videoPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'test.mp4');
 
 		// Uri to load styles into webview
 		const stylesResetUri = webview.asWebviewUri(styleResetPath);
 		const stylesMainUri = webview.asWebviewUri(stylesPathMainPath);
+		const videoUri = webview.asWebviewUri(videoPath);
 
 		// Use a nonce to only allow specific scripts to be run
 		const nonce = getNonce();
@@ -193,7 +195,7 @@ class CatCodingPanel {
 					Use a content security policy to only allow loading images from https or from our extension directory,
 					and only allow scripts that have a specific nonce.
 				-->
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}'; media-src ${webview.cspSource} https:;">
 
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -206,6 +208,7 @@ class CatCodingPanel {
 				<img src="${catGifPath}" width="300" />
 				<h1 id="lines-of-code-counter">0</h1>
 
+				<video crossorigin="anonymous" controls src="${videoUri}"></video>
 				<script nonce="${nonce}" src="${scriptUri}"></script>
 			</body>
 			</html>`;