fix: プレイヤーオプションの調整

(cherry picked from commit 8aabb05)
nacika-ins · Sep 19, 2024 · 4524991 · 4524991
1 parent 5142ebd
commit 4524991
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
@@ -43,6 +43,8 @@ const hide = ref(
 
 <style lang="scss" scoped>
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
+  height: min-content;
+
   position: relative;
 
   --plyr-color-main: var(--accent);

diff --git a/packages/frontend/src/components/MkVideoPlayer.vue b/packages/frontend/src/components/MkVideoPlayer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <video ref="videoPlayer" class="video-js" vjs-default-skin data-setup='{"fluid": true}'></video>
+    <video ref="videoPlayer" class="video-js" vjs-default-skin></video>
   </div>
 </template>
 
@@ -24,9 +24,19 @@ export default {
     };
   },
   mounted() {
-    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
-      this.player.log('onPlayerReady', this);
-    });
+    this.player = videojs(
+      this.$refs.videoPlayer,
+      {
+        ...this.options,
+        fill: true,
+        // responsive: true,
+        fluid: true,
+        // aspectRatio: '4:3',
+      },
+      () => {
+        this.player.log('onPlayerReady', this);
+      },
+    );
   },
   beforeUnmount() {
     if (this.player) {