diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index b83f023f3..5cdc31436 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -1,98 +1,91 @@
 <template>
-  <div>
-    <client-only>
-      <vue-advanced-chat
-        :theme="theme"
-        :current-user-id="currentUser.id"
-        :room-id="computedRoomId"
-        :template-actions="JSON.stringify(templatesText)"
-        :menu-actions="JSON.stringify(menuActions)"
-        :text-messages="JSON.stringify(textMessages)"
-        :message-actions="messageActions"
-        :messages="JSON.stringify(messages)"
-        :messages-loaded="messagesLoaded"
-        :rooms="JSON.stringify(rooms)"
-        :room-actions="JSON.stringify(roomActions)"
-        :rooms-loaded="roomsLoaded"
-        :loading-rooms="loadingRooms"
-        show-files="true"
-        show-audio="true"
-        capture-files="true"
-        :height="'calc(100dvh - 190px)'"
-        :styles="JSON.stringify(computedChatStyle)"
-        :show-footer="true"
-        :responsive-breakpoint="responsiveBreakpoint"
-        :single-room="singleRoom"
-        show-reaction-emojis="false"
-        @send-message="sendMessage($event.detail[0])"
-        @fetch-messages="fetchMessages($event.detail[0])"
-        @fetch-more-rooms="fetchRooms"
-        @add-room="toggleUserSearch"
-        @show-demo-options="showDemoOptions = $event"
-        @open-user-tag="redirectToUserProfile($event.detail[0])"
-        @open-file="openFile($event.detail[0].file.file)"
-      >
-        <div
-          v-if="selectedRoom && selectedRoom.roomId"
-          slot="room-options"
-          class="chat-room-options"
-        >
-          <ds-flex v-if="singleRoom">
-            <ds-flex-item centered class="single-chat-bubble">
-              <nuxt-link :to="{ name: 'chat' }">
-                <base-button icon="expand" size="small" circle />
-              </nuxt-link>
-            </ds-flex-item>
-            <ds-flex-item centered>
-              <div class="vac-svg-button vac-room-options">
-                <slot name="menu-icon">
-                  <base-button
-                    icon="close"
-                    size="small"
-                    circle
-                    @click="$emit('close-single-room', true)"
-                  />
-                </slot>
-              </div>
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-
-        <div slot="room-header-avatar">
-          <div
-            v-if="selectedRoom && selectedRoom.avatar"
-            class="vac-avatar"
-            :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
-          />
-          <div v-else-if="selectedRoom" class="vac-avatar">
-            <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+  <vue-advanced-chat
+    :theme="theme"
+    :current-user-id="currentUser.id"
+    :room-id="computedRoomId"
+    :template-actions="JSON.stringify(templatesText)"
+    :menu-actions="JSON.stringify(menuActions)"
+    :text-messages="JSON.stringify(textMessages)"
+    :message-actions="messageActions"
+    :messages="JSON.stringify(messages)"
+    :messages-loaded="messagesLoaded"
+    :rooms="JSON.stringify(rooms)"
+    :room-actions="JSON.stringify(roomActions)"
+    :rooms-loaded="roomsLoaded"
+    :loading-rooms="loadingRooms"
+    :media-preview-enabled="isSafari ? 'false' : 'true'"
+    show-files="true"
+    show-audio="true"
+    capture-files="true"
+    :height="'calc(100dvh - 190px)'"
+    :styles="JSON.stringify(computedChatStyle)"
+    :show-footer="true"
+    :responsive-breakpoint="responsiveBreakpoint"
+    :single-room="singleRoom"
+    show-reaction-emojis="false"
+    @send-message="sendMessage($event.detail[0])"
+    @fetch-messages="fetchMessages($event.detail[0])"
+    @fetch-more-rooms="fetchRooms"
+    @add-room="toggleUserSearch"
+    @show-demo-options="showDemoOptions = $event"
+    @open-user-tag="redirectToUserProfile($event.detail[0])"
+    @open-file="openFile($event.detail[0].file.file)"
+  >
+    <div v-if="selectedRoom && selectedRoom.roomId" slot="room-options" class="chat-room-options">
+      <ds-flex v-if="singleRoom">
+        <ds-flex-item centered class="single-chat-bubble">
+          <nuxt-link :to="{ name: 'chat' }">
+            <base-button icon="expand" size="small" circle />
+          </nuxt-link>
+        </ds-flex-item>
+        <ds-flex-item centered>
+          <div class="vac-svg-button vac-room-options">
+            <slot name="menu-icon">
+              <base-button
+                icon="close"
+                size="small"
+                circle
+                @click="$emit('close-single-room', true)"
+              />
+            </slot>
           </div>
-        </div>
+        </ds-flex-item>
+      </ds-flex>
+    </div>
 
-        <div
-          v-for="message in messages.filter((m) => m.isUploading)"
-          :slot="'message_' + message._id"
-          v-bind:key="message._id"
-          class="vac-format-message-wrapper"
-        >
-          <div class="markdown">
-            <p>{{ $t('chat.transmitting') }}</p>
-          </div>
-        </div>
+    <div slot="room-header-avatar">
+      <div
+        v-if="selectedRoom && selectedRoom.avatar"
+        class="vac-avatar"
+        :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
+      />
+      <div v-else-if="selectedRoom" class="vac-avatar">
+        <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+      </div>
+    </div>
 
-        <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
-          <div
-            v-if="room.avatar"
-            class="vac-avatar"
-            :style="{ 'background-image': `url('${room.avatar}')` }"
-          />
-          <div v-else class="vac-avatar">
-            <span class="initials">{{ getInitialsName(room.roomName) }}</span>
-          </div>
-        </div>
-      </vue-advanced-chat>
-    </client-only>
-  </div>
+    <div
+      v-for="message in messages.filter((m) => m.isUploading)"
+      :slot="'message_' + message._id"
+      v-bind:key="message._id"
+      class="vac-format-message-wrapper"
+    >
+      <div class="markdown">
+        <p>{{ $t('chat.transmitting') }}</p>
+      </div>
+    </div>
+
+    <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
+      <div
+        v-if="room.avatar"
+        class="vac-avatar"
+        :style="{ 'background-image': `url('${room.avatar}')` }"
+      />
+      <div v-else class="vac-avatar">
+        <span class="initials">{{ getInitialsName(room.roomName) }}</span>
+      </div>
+    </div>
+  </vue-advanced-chat>
 </template>
 
 <script>
@@ -228,6 +221,9 @@ export default {
 
       return roomId
     },
+    isSafari() {
+      return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+    },
     textMessages() {
       return {
         ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
@@ -516,6 +512,11 @@ export default {
 
     openFile: async function (file) {
       if (!file || !file.url) return
+
+      /* For videos, this function is called only on Safari.
+         We don't want to download video files when clicking on them. */
+      if (file.type.startsWith('video/')) return
+
       /* To make the browser download the file instead of opening it, it needs to be
          from the same origin or from local blob storage. So we fetch it first
          and then create a download link from blob storage. */
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index a75535a84..f255d547a 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -14,7 +14,9 @@
       <modal />
     </client-only>
     <div v-if="getShowChat.showChat" class="chat-modul">
-      <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
+      <client-only>
+        <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
+      </client-only>
     </div>
   </div>
 </template>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 0bb4def38..ffeb6a800 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -5,12 +5,14 @@
       @add-chat-room="addChatRoom"
       @close-user-search="showUserSearch = false"
     />
-    <chat
-      :roomId="getShowChat.showChat ? getShowChat.roomID : null"
-      ref="chat"
-      @toggle-user-search="showUserSearch = !showUserSearch"
-      :show-room="showRoom"
-    />
+    <client-only>
+      <chat
+        :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+        ref="chat"
+        @toggle-user-search="showUserSearch = !showUserSearch"
+        :show-room="showRoom"
+      />
+    </client-only>
   </div>
 </template>