diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -5,6 +5,7 @@
 import 'react-circular-progressbar/dist/styles.css';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
 
+import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
 import type { EncryptedMediaType } from 'lib/types/media-types.js';
 
 import { fetchAndDecryptMedia } from './encryption-utils.js';
@@ -43,13 +44,22 @@
   const [source, setSource] = React.useState<?Source>(null);
   const videoRef = React.useRef<?HTMLVideoElement>(null);
 
+  const identityContext = React.useContext(IdentityClientContext);
+  invariant(identityContext, 'Identity context should be set');
+  const { getAuthMetadata } = identityContext;
+
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setSource(null);
 
     const loadDecrypted = async () => {
-      const { result } = await fetchAndDecryptMedia(blobURI, encryptionKey);
+      const authMedatata = await getAuthMetadata();
+      const { result } = await fetchAndDecryptMedia(
+        blobURI,
+        encryptionKey,
+        authMedatata,
+      );
       if (!isMounted) {
         return;
       }
@@ -71,7 +81,7 @@
         URL.revokeObjectURL(uriToDispose);
       }
     };
-  }, [blobURI, encryptionKey]);
+  }, [blobURI, encryptionKey, getAuthMetadata]);
 
   // we need to update the video source when the source changes
   // because re-rendering the <source> element wouldn't reload parent <video>
diff --git a/web/media/encryption-utils.js b/web/media/encryption-utils.js
--- a/web/media/encryption-utils.js
+++ b/web/media/encryption-utils.js
@@ -7,12 +7,15 @@
 import { hexToUintArray, uintArrayToHexString } from 'lib/media/data-utils.js';
 import { fileInfoFromData } from 'lib/media/file-utils.js';
 import { fetchableMediaURI } from 'lib/media/media-utils.js';
+import type { AuthMetadata } from 'lib/shared/identity-client-context.js';
 import type {
   MediaMissionFailure,
   MediaMissionStep,
 } from 'lib/types/media-types.js';
+import { isBlobServiceURI } from 'lib/utils/blob-service.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 import { calculatePaddedLength, pad, unpad } from 'lib/utils/pkcs7-padding.js';
+import { createDefaultHTTPRequestHeaders } from 'lib/utils/services-utils.js';
 
 import { base64DecodeBuffer } from '../utils/base64-utils.js';
 
@@ -140,6 +143,7 @@
 async function fetchAndDecryptMedia(
   blobURI: string,
   encryptionKey: string,
+  authMetadata: AuthMetadata,
 ): Promise<{
   steps: $ReadOnlyArray<DecryptFileStep>,
   result: { success: true, uri: string } | DecryptionFailure,
@@ -149,11 +153,16 @@
   const steps: DecryptFileStep[] = [];
 
   // Step 1 - Fetch the encrypted media and convert it to a Uint8Array
+  let headers;
+  if (isBlobServiceURI(blobURI)) {
+    headers = createDefaultHTTPRequestHeaders(authMetadata);
+  }
+
   let data;
   const fetchStartTime = Date.now();
   const url = fetchableMediaURI(blobURI);
   try {
-    const response = await fetch(url);
+    const response = await fetch(url, { headers });
     if (!response.ok) {
       throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
     }
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -3,6 +3,8 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
+
 import { fetchAndDecryptMedia } from './encryption-utils.js';
 import { preloadImage } from './media-utils.js';
 import type { CSSStyle } from '../types/styles';
@@ -36,6 +38,10 @@
 
   const [thumbnailImage, setThumbnailImage] = React.useState<?string>(null);
 
+  const identityContext = React.useContext(IdentityClientContext);
+  invariant(identityContext, 'Identity context should be set');
+  const { getAuthMetadata } = identityContext;
+
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
@@ -54,9 +60,11 @@
         thumbnailBlobURI && thumbnailEncryptionKey,
         'invalid encrypted thumbnail source',
       );
+      const authMedatata = await getAuthMetadata();
       const { result } = await fetchAndDecryptMedia(
         thumbnailBlobURI,
         thumbnailEncryptionKey,
+        authMedatata,
       );
       if (isMounted && result.success) {
         setThumbnailImage(result.uri);
@@ -70,7 +78,7 @@
         URL.revokeObjectURL(uriToDispose);
       }
     };
-  }, [thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey]);
+  }, [thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey, getAuthMetadata]);
 
   let videoSource;
   if (uri) {