diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/media-banner.vue
index d4067fad76..0c44c7aaea 100644
--- a/packages/client/src/components/media-banner.vue
+++ b/packages/client/src/components/media-banner.vue
@@ -39,8 +39,6 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-new Vlitejs('#player');
-
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
@@ -49,7 +47,10 @@ function volumechange() {
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) {
+		audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+		new Vlitejs('#player');
+	}
 });
 </script>
 
diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/media-video.vue
index 57a81cd0d0..9f5c3cc83a 100644
--- a/packages/client/src/components/media-video.vue
+++ b/packages/client/src/components/media-video.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import 'vlitejs/dist/vlite.css';
 import Vlitejs from 'vlitejs';
@@ -37,10 +37,15 @@ const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-Vlitejs.registerPlugin('pip', VlitejsPip);
+const videoEl = $ref<HTMLVideoElement | null>();
 
-new Vlitejs('#player', {
-	plugins: ['pip'],
+onMounted(() => {
+	if (videoEl) {
+		Vlitejs.registerPlugin('pip', VlitejsPip);
+		new Vlitejs('#player', {
+			plugins: ['pip'],
+		});
+	}
 });
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));