Update index.html

index.html

@@ -40,11 +40,12 @@
 
     /* 字幕スタイル */
     video::cue {
-      background-color: rgba(0, 0, 0, 0.7);
-      color: #c7dbed;
-      font-family: 'Courier New', monospace;
-      text-shadow: 1px 1px 2px #000;
-      outline: 1px solid #0b3e8f;
+      background-color: rgba(0, 0, 0, 0.7) !important;
+      color: #c7dbed !important;
+      font-family: 'Courier New', monospace !important;
+      text-shadow: 1px 1px 2px #000 !important;
+      outline: 3px solid #0b3e8f !important;
+      border-radius: 10px !important; /* 角を丸める */
     }
 
     /* カスタム動画コントロール */
@@ -263,24 +264,25 @@
       background-color: rgba(0, 20, 40, 0.5);
       border: 1px solid #0066ff;
     }
-      /* 字幕スタイルを修正 */
-    video::cue {
-      background-color: rgba(0, 0, 0, 0.7) !important;
-      color: #c7dbed !important;
-      border-radius: 25% 10%;
-      font-family: 'Courier New', monospace !important;
-      text-shadow: 1px 1px 2px #000 !important;
-      outline: 3px solid #0b3e8f !important;
-    }
 
     /* 字幕サイズ調整用のCSS変数 */
     :root {
       --subtitle-scale: 1;
+      --subtitle-border-radius: 10px;
     }
 
     video::cue {
       font-size: calc(16px * var(--subtitle-scale)) !important;
       line-height: 1.5 !important;
+      border-radius: var(--subtitle-border-radius) !important;
+    }
+
+    /* 全画面時の字幕サイズ調整 */
+    .video-container:fullscreen video::cue,
+    .video-container:-webkit-full-screen video::cue,
+    .video-container:-moz-full-screen video::cue,
+    .video-container:-ms-fullscreen video::cue {
+      font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
     }
   </style>
 </head>
@@ -381,11 +383,13 @@
   const subtitleSizeInput = document.getElementById('subtitleSizeInput');
   const subtitleTrack = document.getElementById('subtitleTrack');
   const subtitleTrackElement = document.getElementById('subtitleTrackElement');
+  const videoContainer = document.querySelector('.video-container');
 
   // 初期設定
   video.controls = false;
   let isDragging = false;
   let subtitlesEnabled = true;
+  let normalVideoWidth = videoContainer.clientWidth;
 
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
@@ -473,13 +477,26 @@
   }
 
   function goFullscreen() {
-    const container = document.querySelector('.video-container');
-    if (container.requestFullscreen) {
-      container.requestFullscreen();
-    } else if (container.webkitRequestFullscreen) {
-      container.webkitRequestFullscreen();
-    } else if (container.msRequestFullscreen) {
-      container.msRequestFullscreen();
+    if (videoContainer.requestFullscreen) {
+      videoContainer.requestFullscreen();
+    } else if (videoContainer.webkitRequestFullscreen) {
+      videoContainer.webkitRequestFullscreen();
+    } else if (videoContainer.msRequestFullscreen) {
+      videoContainer.msRequestFullscreen();
+    }
+  }
+
+  // 全画面変更時の字幕サイズ調整
+  function updateSubtitleScaleForFullscreen() {
+    if (document.fullscreenElement || document.webkitFullscreenElement || 
+        document.mozFullScreenElement || document.msFullscreenElement) {
+      // 全画面モード
+      const fullscreenWidth = window.innerWidth;
+      const scaleFactor = fullscreenWidth / normalVideoWidth;
+      document.documentElement.style.setProperty('--fullscreen-scale', scaleFactor);
+    } else {
+      // 通常モード
+      document.documentElement.style.setProperty('--fullscreen-scale', 1);
     }
   }
 
@@ -560,6 +577,12 @@
   volumeSlider.addEventListener('input', handleVolumeChange);
   fullscreenBtn.addEventListener('click', goFullscreen);
 
+  // 全画面変更イベントを監視
+  document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
+  document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
+  document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
+  document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
+
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);
@@ -567,10 +590,14 @@
     video.loop = loopCheckbox.checked;
     toggleSubtitles();
     updateProgress();
+    // 通常時の動画幅を記録
+    normalVideoWidth = videoContainer.clientWidth;
   });
 
   // CSS変数を設定
   document.documentElement.style.setProperty('--subtitle-scale', '1');
+  document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
+  document.documentElement.style.setProperty('--fullscreen-scale', '1');
 </script>
 </body>
 </html>