# [メタ情報]
# 識別子: ダウンロードOK動画パッケージphp_exe
# システム名: 
# 技術種別: Misc
# 機能名: Misc
# 使用言語: php
# 状態: 実行用
# [/メタ情報]
要約：
このPHPコード群は、WordPress用のカスタムテンプレートファイル（`dr5.php`、`dr6.php`、`ds5.php`、`ds6.php`）であり、動画再生と字幕表示機能を提供します。URLから`drid`パラメータで動画を特定し、`videoct.json`から動画情報を取得します。Google翻訳の表示を最適化するためのCSSとJavaScriptも組み込まれています。

`dr5.php`と`dr6.php`はそれぞれ高画質と低画質の動画を「枠内字幕」で表示します。ピクチャー・イン・ピクチャー（PiP）や全画面表示時に自動的に字幕を表示し、通常時は非表示にするJavaScript制御が特徴です。動画の下には、現在再生中の字幕行をハイライトし、クリックで該当箇所へシークできる「字幕一覧」がスクロールボックス形式で提供されます。

`ds5.php`と`ds6.php`は、高画質と低画質の動画を「枠外字幕」で表示します。ネイティブ字幕は使用せず、動画の下に独自の領域で字幕を表示し、DOMの差分更新によりGoogle翻訳の安定性を高めています。これらのテンプレートでは字幕一覧は表示されません。

各ファイル間では、画質（高画質/低画質）と字幕表示形式（枠内/枠外）を切り替えるためのリンクが用意されており、ユーザーは好みに応じて視聴体験を選択できます。



dr5.php

```
<?php
/*
Template Name: Dropbox With Subtitle Template (dr5) - High Quality / Inside Subtitles (Overlay + PiP-safe + InternalScroll + Protection + NormalFont)
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts  = explode('drid=', $url);
        $params = explode('&', end($parts));
        return $params[0];
    }
    return false;
}

function get_custom_data($url) {
    return file_get_contents($url);
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gt-final-barrier" style="height: 28px!important; display: flex!important; justify-content: space-between!important; align-items: center!important; width: 100%!important; padding: 0 10px!important; border-bottom: 1px solid #eee; background-color: #fff; box-sizing: border-box; overflow: visible!important; margin: 0!important; position: relative; z-index: 1!important;">
    
    <div style="height: 28px; display: flex; align-items: center; flex-grow: 1; overflow: visible!important;">
        <div class="gt-container" style="pointer-events: auto!important;">
            <?php echo do_shortcode('[gtranslate]'); ?>
        </div>
    </div>
    
    <div style="height: 28px!important; display: flex; align-items: center;">
        <a style="display: block; height: 26px;" href="https://notebooklm.google.com/notebook/aa64cc3d-0160-4433-b934-ecc5ab902287" target="_blank" rel="noopener">
<img style="height: 26px!important; width: auto!important; border: none!important; display: block!important;" src="https://XXXXXX.com/rd.php?id=NgFHFYXH.png" alt="Q&A" />
</a>
    </div>
</div>

<style>
/* 【最優先：被さり対策】サイドバー展開時はバーを完全に消去 */
html.noscroll #gt-final-barrier,
body.noscroll #gt-final-barrier,
html.sidebar-visible #gt-final-barrier,
body.sidebar-visible #gt-final-barrier,
.sidebar-visible #gt-final-barrier {
    display: none !important;
}

/* 言語メニューがロゴに被らないよう、必ず「下方向」に開かせる */
.gt_menu, .gt-menu {
    top: 28px !important;
    bottom: auto !important;
    z-index: 999999 !important;
}
</style>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();

if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos     = json_decode($json_data, true);
        $video_info = array_filter($videos, function ($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info        = reset($video_info);
            $image_url         = $video_info['image']         ?? '';
            $video_url         = $video_info['video']         ?? '';
            $subtitle_url      = $video_info['subtitle']      ?? '';
            $subtitle_list_url = $video_info['subtitle_list'] ?? '';
            $explain_line_url  = $video_info['explain_line']  ?? '';

            // ---- Styles ----
            echo '<style>
            :root{ --dr5-max: 1920px; }

            .radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
            .radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

            .video-wrap{position:relative;width:100%;margin:0 auto}
            figure.wp-block-video.aligncenter{
              width:100%;
              max-width:min(var(--dr5-max, 1920px), 98vw);
              margin:0 auto;
            }

            #subtitleOverlay{ display: none; }

            .dr5-sublist details > p{
              height:200px;
              overflow:auto;
              background-color:#EDF7FF;
              padding:2px 6px; margin:0;
              box-shadow:3px 3px 4px black;
              position: relative; 
            }
            .dr5-sublist details > summary{
              padding:2px 6px; width:100%;
              background-color:#ddd; border:none;
              box-shadow:3px 3px 4px black;
              cursor:pointer; list-style:none;
            }
            
            .imk-line {
                display: inline-block;
                width: 100%;
                border-radius: 2px;
                transition: background-color 0.1s;
            }
            </style>';

            echo '<div class="dr5-container">';

            // ---- 切替リンク ----
            echo '<div style="text-align:left;margin:10px 0 5px 0;">';
            echo '<span class="radio-label selected">高画質</span> ';
            echo '<a href="https://XXXXXX.com/dr6/?drid=' . esc_attr($drid) . '" class="radio-label">低画質</a>';
            echo '<span style="margin:0 10px;">｜</span>';
            echo '<span class="radio-label selected">枠内字幕</span> ';
            echo '<a href="https://XXXXXX.com/ds5/?drid=' . esc_attr($drid) . '" class="radio-label">枠外字幕</a>';
            echo '</div>';

            // ---- 動画 ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video_url)) {
                echo '<div class="video-wrap">';
                echo '<video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="none"'
                   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
                   . ' style="width:100%;height:auto;">';
                echo '  <source src="' . esc_url($video_url) . '" type="video/mp4">';
                
                // ★修正箇所1：字幕一覧がない場合のみ default 属性を付与する判定ロジック
                if (!empty($subtitle_url)) {
                    $default_attr = empty($subtitle_list_url) ? ' default' : '';
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles"' . $default_attr . '>';
                }
                
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ★修正箇所2：全ブラウザ対応の画面検知 ＆ 字幕コントロール
                echo '<script>
document.addEventListener("DOMContentLoaded", function(){
  var video   = document.getElementById("myVideo");
  var trackEl = video ? video.querySelector("track[kind=\'subtitles\'], track[kind=\'captions\']") : null;
  var overlay = document.getElementById("subtitleOverlay");
  if(!video) return;

  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  var currentMode = "hidden"; // 現在の状態を記憶

  // ★追加：字幕一覧がページ内に存在するか判定
  var hasList = document.querySelector(".dr5-sublist") !== null;

  function setNative(mode){
    currentMode = mode;
    try{
      if(video.textTracks && video.textTracks.length){
        for(var i=0;i<video.textTracks.length;i++){ video.textTracks[i].mode = mode; }
      }
      if(trackEl && trackEl.track) trackEl.track.mode = mode;
    }catch(e){}
  }

  // default属性により読み込み完了時に表示されてしまうのを防ぐ（字幕がない時は防がない）
  if(trackEl) {
      trackEl.addEventListener("load", function() { setNative(currentMode); });
  }

  function useNormalMode(){
    if(overlay) overlay.style.display="none";
    setNative("hidden");
  }
  function useSpecialMode(){
    if(overlay) overlay.style.display="none";
    setNative("showing");
  }

  // ★変更：字幕一覧がない場合は初期状態から表示モード（showing）にする
  if (!hasList) {
      currentMode = "showing";
      useSpecialMode();
  } else {
      useNormalMode(); // 初期状態は非表示
  }

  // ★ここを追加：画面状態の判定（PiPか全画面か）
  function isSpecialMode() {
    var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    var isIOSFs = !!(video.webkitDisplayingFullscreen); // iOS Safari独自の全画面プロパティ
    var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
    var isWireless = !!(video.webkitCurrentPlaybackTargetIsWireless);
    return isFs || isIOSFs || isPiP || isWireless;
  }

  // ★最強ガード：今の状態をチェックして、ネイティブ字幕のON/OFFを自動切り替え（iOS対応）
  video.addEventListener("timeupdate", function(){
    // ★変更：特別モードか、「字幕一覧がない」場合は表示（showing）を維持する
    var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
    if (currentMode !== desiredMode) {
        desiredMode === "showing" ? useSpecialMode() : useNormalMode();
    }
  });

  // PiP（ピクチャー・イン・ピクチャー）等の検知（既存維持）
  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useSpecialMode() : useNormalMode(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useSpecialMode() : useNormalMode();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useSpecialMode);
    video.addEventListener("leavepictureinpicture", useNormalMode);
  }

  // 全画面表示の検知（全ブラウザ対応版）
  function handleFs(){
    var fs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    if(!fs) return useNormalMode();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useSpecialMode() : useNormalMode();
  }
  document.addEventListener("fullscreenchange", handleFs);
  document.addEventListener("webkitfullscreenchange", handleFs);
  document.addEventListener("mozfullscreenchange", handleFs);
  document.addEventListener("MSFullscreenChange", handleFs);
});
</script>';
            } else {
                echo '<p style="text-align:center;color:red;font-weight:bold;margin-top:20px;">（この動画の高画質版は準備中です）</p>';
            }
            echo '<figcaption></figcaption>';
            echo '</figure>';

            // ---- 字幕一覧（スクロールボックス）----
            if (!empty($subtitle_list_url)) {
                echo '<div class="dr5-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';

                // 行の自動梱包 ＆ 色の直接書き込み ＆ スクロール
                echo '<script>
(function(){
  var root = document.querySelector(".dr5-sublist");
  var video = document.getElementById("myVideo");
  if(!root || !video) return;

  var detailsEl = root.querySelector("details");
  if (detailsEl) {
      detailsEl.open = true; 
      var summaryEl = detailsEl.querySelector("summary");
      if (summaryEl) {
          summaryEl.textContent = "字幕(シーン)はここをクリック"; 
      }
  }

  var listContainer = root.querySelector("details > p");
  if (listContainer && !listContainer.dataset.formatted) {
      var html = listContainer.innerHTML;
      var lines = html.split(/<br\s*\/?>/i);
      var newHtml = "";
      for(var j=0; j<lines.length; j++) {
          if(lines[j].trim() === "") continue;
          newHtml += "<span class=\'imk-line\'>" + lines[j] + "</span><br>";
      }
      listContainer.innerHTML = newHtml;
      listContainer.dataset.formatted = "true";
  }

  function parseTs(ts){
    if(!ts) return null;
    var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
    if(p.length===2) return p[0]*60 + p[1];
    if(p.length===3) return p[0]*3600 + p[1]*60 + p[2];
    return null;
  }

  root.addEventListener("click", function(e){
    var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
    if(!a || !root.contains(a)) return;
    e.preventDefault();
    var sec = parseTs(a.getAttribute("data-seek"));
    if(sec==null) return;
    try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
  });

  video.addEventListener("timeupdate", function(){
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

    var cur = video.currentTime;
    var activeA = null;

    for(var i=0; i<cues.length; i++){
        var t = parseTs(cues[i].getAttribute("data-seek"));
        if(t !== null && cur >= t - 0.5){
            activeA = cues[i];
        } else if(t > cur){
            break;
        }
    }

    if(activeA){
        var activeLine = activeA.closest(".imk-line");
        if(!activeLine) activeLine = activeA; 

        if(activeLine.classList.contains("active-hl")) return;

        var oldLines = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<oldLines.length; k++) {
            oldLines[k].classList.remove("active-hl");
            oldLines[k].style.removeProperty("background-color");
            oldLines[k].style.removeProperty("color");
            oldLines[k].style.removeProperty("font-weight");
            var oldLinks = oldLines[k].querySelectorAll("a");
            for(var m=0; m<oldLinks.length; m++) {
                oldLinks[m].style.removeProperty("color");
            }
        }

        activeLine.classList.add("active-hl");
        activeLine.style.setProperty("background-color", "#ffff00", "important");
        activeLine.style.setProperty("color", "red", "important");
        activeLine.style.setProperty("font-weight", "normal", "important");
        
        var newLinks = activeLine.querySelectorAll("a");
        for(var n=0; n<newLinks.length; n++) {
            newLinks[n].style.setProperty("color", "red", "important");
            newLinks[n].style.setProperty("text-decoration", "none", "important");
        }

        if(listContainer.offsetParent !== null){
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = activeLine.getBoundingClientRect();
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeLine.clientHeight / 2);
            
            listContainer.scrollTo({
                top: targetScroll,
                behavior: "smooth"
            });
        }
    }
  });

})();
</script>';
            }

            if (!empty($explain_line_url)) {
                echo '<div style="text-align:left;">';
                echo '<p>' . nl2br(get_custom_data($explain_line_url)) . '</p>';
                echo '</div>';
            }

            echo '</div>'; 
        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }
    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }
} else {
    echo '<p>dridが指定されていません。</p>';
}

if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```



dr6.php

```
<?php
/*
Template Name: Dropbox With Subtitle Template (dr6) - Low Quality / Inside Subtitles (Overlay + PiP-safe + InternalScroll + Protection + NormalFont)
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts  = explode('drid=', $url);
        $params = explode('&', end($parts));
        return $params[0];
    }
    return false;
}

function get_custom_data($url) {
    return file_get_contents($url);
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gt-final-barrier" style="height: 28px!important; display: flex!important; justify-content: space-between!important; align-items: center!important; width: 100%!important; padding: 0 10px!important; border-bottom: 1px solid #eee; background-color: #fff; box-sizing: border-box; overflow: visible!important; margin: 0!important; position: relative; z-index: 1!important;">
    
    <div style="height: 28px; display: flex; align-items: center; flex-grow: 1; overflow: visible!important;">
        <div class="gt-container" style="pointer-events: auto!important;">
            <?php echo do_shortcode('[gtranslate]'); ?>
        </div>
    </div>
    
    <div style="height: 28px!important; display: flex; align-items: center;">
        <a style="display: block; height: 26px;" href="https://notebooklm.google.com/notebook/aa64cc3d-0160-4433-b934-ecc5ab902287" target="_blank" rel="noopener">
<img style="height: 26px!important; width: auto!important; border: none!important; display: block!important;" src="https://XXXXXX.com/rd.php?id=NgFHFYXH.png" alt="Q&A" />
</a>
    </div>
</div>

<style>
/* 【最優先：被さり対策】サイドバー展開時はバーを完全に消去 */
html.noscroll #gt-final-barrier,
body.noscroll #gt-final-barrier,
html.sidebar-visible #gt-final-barrier,
body.sidebar-visible #gt-final-barrier,
.sidebar-visible #gt-final-barrier {
    display: none !important;
}

/* 言語メニューがロゴに被らないよう、必ず「下方向」に開かせる */
.gt_menu, .gt-menu {
    top: 28px !important;
    bottom: auto !important;
    z-index: 999999 !important;
}
</style>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();

if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos     = json_decode($json_data, true);
        $video_info = array_filter($videos, function ($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info        = reset($video_info);
            $image_url         = $video_info['image']         ?? '';
            $video_url         = $video_info['video']         ?? '';   // High quality (unused here)
            $video2_url        = $video_info['video2']        ?? '';   // Low quality (used here)
            $subtitle_url      = $video_info['subtitle']      ?? '';
            $subtitle_list_url = $video_info['subtitle_list'] ?? '';
            $explain_line_url  = $video_info['explain_line']  ?? '';

            // ---- Styles ----
            echo '<style>
            :root{ --dr6-max: 1920px; }

            .radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
            .radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

            .video-wrap{position:relative;width:100%;margin:0 auto}
            figure.wp-block-video.aligncenter{
              width:100%;
              max-width:min(var(--dr6-max, 1920px), 98vw);
              margin:0 auto;
            }

            #subtitleOverlay{ display: none; }

            .dr6-sublist details > p{
              height:200px;
              overflow:auto;
              background-color:#EDF7FF;
              padding:2px 6px; margin:0;
              box-shadow:3px 3px 4px black;
              position: relative; 
            }
            .dr6-sublist details > summary{
              padding:2px 6px; width:100%;
              background-color:#ddd; border:none;
              box-shadow:3px 3px 4px black;
              cursor:pointer; list-style:none;
            }
            
            .imk-line {
                display: inline-block;
                width: 100%;
                border-radius: 2px;
                transition: background-color 0.1s;
            }
            </style>';

            echo '<div class="dr6-container">';

            // ---- 切替リンク ----
            echo '<div style="text-align:left;margin:10px 0 5px 0;">';
            echo '<a href="https://XXXXXX.com/dr5/?drid=' . esc_attr($drid) . '" class="radio-label">高画質</a> ';
            echo '<span class="radio-label selected">低画質</span>';
            echo '<span style="margin:0 10px;">｜</span>';
            echo '<span class="radio-label selected">枠内字幕</span> ';
            echo '<a href="https://XXXXXX.com/ds6/?drid=' . esc_attr($drid) . '" class="radio-label">枠外字幕</a>';
            echo '</div>';

            // ---- 動画 ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video2_url)) {
                echo '<div class="video-wrap">';
                echo '<video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="none"'
                   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
                   . ' style="width:100%;height:auto;">';
                echo '  <source src="' . esc_url($video2_url) . '" type="video/mp4">';
                
                // ★修正箇所1：字幕一覧がない場合のみ default 属性を付与する判定ロジック
                if (!empty($subtitle_url)) {
                    $default_attr = empty($subtitle_list_url) ? ' default' : '';
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles"' . $default_attr . '>';
                }
                
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ★修正箇所2：全ブラウザ対応の画面検知 ＆ 字幕コントロール
                echo '<script>
document.addEventListener("DOMContentLoaded", function(){
  var video   = document.getElementById("myVideo");
  var trackEl = video ? video.querySelector("track[kind=\'subtitles\'], track[kind=\'captions\']") : null;
  var overlay = document.getElementById("subtitleOverlay");
  if(!video) return;

  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  var currentMode = "hidden"; // 現在の状態を記憶

  // ★追加：字幕一覧がページ内に存在するか判定
  var hasList = document.querySelector(".dr6-sublist") !== null;

  function setNative(mode){
    currentMode = mode;
    try{
      if(video.textTracks && video.textTracks.length){
        for(var i=0;i<video.textTracks.length;i++){ video.textTracks[i].mode = mode; }
      }
      if(trackEl && trackEl.track) trackEl.track.mode = mode;
    }catch(e){}
  }

  // default属性により読み込み完了時に表示されてしまうのを防ぐ（字幕がない時は防がない）
  if(trackEl) {
      trackEl.addEventListener("load", function() { setNative(currentMode); });
  }

  function useNormalMode(){
    if(overlay) overlay.style.display="none";
    setNative("hidden");
  }
  function useSpecialMode(){
    if(overlay) overlay.style.display="none";
    setNative("showing");
  }

  // ★変更：字幕一覧がない場合は初期状態から表示モード（showing）にする
  if (!hasList) {
      currentMode = "showing";
      useSpecialMode();
  } else {
      useNormalMode(); // 初期状態は非表示
  }

  // 画面状態の判定（PiPか全画面か）
  function isSpecialMode() {
    var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    var isIOSFs = !!(video.webkitDisplayingFullscreen); // iOS Safari独自の全画面プロパティ
    var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
    var isWireless = !!(video.webkitCurrentPlaybackTargetIsWireless);
    return isFs || isIOSFs || isPiP || isWireless;
  }

  // ★最強ガード：今の状態をチェックして、ネイティブ字幕のON/OFFを自動切り替え（iOS対応）
  video.addEventListener("timeupdate", function(){
    // ★変更：特別モードか、「字幕一覧がない」場合は表示（showing）を維持する
    var desiredMode = (isSpecialMode() || !hasList) ? "showing" : "hidden";
    if (currentMode !== desiredMode) {
        desiredMode === "showing" ? useSpecialMode() : useNormalMode();
    }
  });

  // PiP（ピクチャー・イン・ピクチャー）等の検知
  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useSpecialMode() : useNormalMode(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useSpecialMode() : useNormalMode();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useSpecialMode);
    video.addEventListener("leavepictureinpicture", useNormalMode);
  }

  // 全画面表示の検知（全ブラウザ対応版）
  function handleFs(){
    var fs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    if(!fs) return useNormalMode();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useSpecialMode() : useNormalMode();
  }
  document.addEventListener("fullscreenchange", handleFs);
  document.addEventListener("webkitfullscreenchange", handleFs);
  document.addEventListener("mozfullscreenchange", handleFs);
  document.addEventListener("MSFullscreenChange", handleFs);
});
</script>';
            } else {
                echo '<p style="text-align:center;color:red;font-weight:bold;margin-top:20px;">（この動画の低画質版は準備中です）</p>';
            }
            echo '<figcaption></figcaption>';
            echo '</figure>';

            // ---- 字幕一覧（スクロールボックス）----
            if (!empty($subtitle_list_url)) {
                echo '<div class="dr6-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';

                // 行の自動梱包 ＆ 色の直接書き込み ＆ スクロール
                echo '<script>
(function(){
  var root = document.querySelector(".dr6-sublist");
  var video = document.getElementById("myVideo");
  if(!root || !video) return;

  var detailsEl = root.querySelector("details");
  if (detailsEl) {
      detailsEl.open = true; 
      var summaryEl = detailsEl.querySelector("summary");
      if (summaryEl) {
          summaryEl.textContent = "字幕はここをクリックしてご覧ください。"; 
      }
  }

  var listContainer = root.querySelector("details > p");
  if (listContainer && !listContainer.dataset.formatted) {
      var html = listContainer.innerHTML;
      var lines = html.split(/<br\s*\/?>/i);
      var newHtml = "";
      for(var j=0; j<lines.length; j++) {
          if(lines[j].trim() === "") continue;
          newHtml += "<span class=\'imk-line\'>" + lines[j] + "</span><br>";
      }
      listContainer.innerHTML = newHtml;
      listContainer.dataset.formatted = "true";
  }

  function parseTs(ts){
    if(!ts) return null;
    var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
    if(p.length===2) return p[0]*60 + p[1];
    if(p.length===3) return p[0]*3600 + p[1]*60 + p[2];
    return null;
  }

  root.addEventListener("click", function(e){
    var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
    if(!a || !root.contains(a)) return;
    e.preventDefault();
    var sec = parseTs(a.getAttribute("data-seek"));
    if(sec==null) return;
    try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
  });

  video.addEventListener("timeupdate", function(){
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

    var cur = video.currentTime;
    var activeA = null;

    for(var i=0; i<cues.length; i++){
        var t = parseTs(cues[i].getAttribute("data-seek"));
        if(t !== null && cur >= t - 0.5){
            activeA = cues[i];
        } else if(t > cur){
            break;
        }
    }

    if(activeA){
        var activeLine = activeA.closest(".imk-line");
        if(!activeLine) activeLine = activeA; 

        if(activeLine.classList.contains("active-hl")) return;

        var oldLines = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<oldLines.length; k++) {
            oldLines[k].classList.remove("active-hl");
            oldLines[k].style.removeProperty("background-color");
            oldLines[k].style.removeProperty("color");
            oldLines[k].style.removeProperty("font-weight");
            var oldLinks = oldLines[k].querySelectorAll("a");
            for(var m=0; m<oldLinks.length; m++) {
                oldLinks[m].style.removeProperty("color");
            }
        }

        activeLine.classList.add("active-hl");
        activeLine.style.setProperty("background-color", "#ffff00", "important");
        activeLine.style.setProperty("color", "red", "important");
        activeLine.style.setProperty("font-weight", "normal", "important");
        
        var newLinks = activeLine.querySelectorAll("a");
        for(var n=0; n<newLinks.length; n++) {
            newLinks[n].style.setProperty("color", "red", "important");
            newLinks[n].style.setProperty("text-decoration", "none", "important");
        }

        if(listContainer.offsetParent !== null){
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = activeLine.getBoundingClientRect();
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeLine.clientHeight / 2);
            
            listContainer.scrollTo({
                top: targetScroll,
                behavior: "smooth"
            });
        }
    }
  });

})();
</script>';
            }

            if (!empty($explain_line_url)) {
                echo '<div style="text-align:left;">';
                echo '<p>' . nl2br(get_custom_data($explain_line_url)) . '</p>';
                echo '</div>';
            }

            echo '</div>'; // .dr6-container
        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }
    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }
} else {
    echo '<p>dridが指定されていません。</p>';
}

if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```

ds5.php

```
<?php
/*
Template Name: Dropbox Without Subtitle Template (ds5) - High/Low Quality + Outside Subtitle (wide, stable)
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts = explode('drid=', $url);
        return explode('&', end($parts))[0];
    }
    return false;
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gt-final-barrier" style="height: 28px!important; display: flex!important; justify-content: space-between!important; align-items: center!important; width: 100%!important; padding: 0 10px!important; border-bottom: 1px solid #eee; background-color: #fff; box-sizing: border-box; overflow: visible!important; margin: 0!important; position: relative; z-index: 1!important;">
    
    <div style="height: 28px; display: flex; align-items: center; flex-grow: 1; overflow: visible!important;">
        <div class="gt-container" style="pointer-events: auto!important;">
            <?php echo do_shortcode('[gtranslate]'); ?>
        </div>
    </div>
    
    <div style="height: 28px!important; display: flex; align-items: center;">
        <a style="display: block; height: 26px;" href="https://notebooklm.google.com/notebook/aa64cc3d-0160-4433-b934-ecc5ab902287" target="_blank" rel="noopener">
<img style="height: 26px!important; width: auto!important; border: none!important; display: block!important;" src="https://XXXXXX.com/rd.php?id=NgFHFYXH.png" alt="Q&A" />
</a>
    </div>
</div>

<style>
/* 【最優先：被さり対策】サイドバー展開時はバーを完全に消去 */
html.noscroll #gt-final-barrier,
body.noscroll #gt-final-barrier,
html.sidebar-visible #gt-final-barrier,
body.sidebar-visible #gt-final-barrier,
.sidebar-visible #gt-final-barrier {
    display: none !important;
}

/* 言語メニューがロゴに被らないよう、必ず「下方向」に開かせる */
.gt_menu, .gt-menu {
    top: 28px !important;
    bottom: auto !important;
    z-index: 999999 !important;
}
</style>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();
if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos = json_decode($json_data, true);
        $video_info = array_filter($videos, function($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info  = reset($video_info);
            $image_url   = $video_info['image']   ?? '';
            $video_url   = $video_info['video']   ?? ''; // 高画質（ds5はこちら）
            $video2_url  = $video_info['video2']  ?? ''; // 低画質（ds6で使用）
            $subtitle_url= $video_info['subtitle']?? '';

            // ===== Styles（dr5/dr6 と同じ横幅ロジック）=====
            echo '<style>
:root{
  /* 必要ならテーマ側から上書き可 */
  --ds5-max: 1920px;
}
.radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
.radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

/* 動画と枠外字幕を同じ幅で束ねる外枠 */
.ds5-shell{
  width: 100%;
  max-width: min(var(--ds5-max, 1920px), 98vw);
  margin: 0 auto;
}

/* Gutenberg の既定 max-width 影響を受ける場合に備え、figure 自体も同じ制約で中央寄せ */
figure.wp-block-video.aligncenter{
  width: 100%;
  max-width: min(var(--ds5-max, 1920px), 98vw);
  margin: 0 auto;
}

/* video は常にコンテナ幅いっぱい */
#myVideo{ width:100%; height:auto; display:block; }

/* 枠外字幕（動画の外＝下に出す） */
#subtitleData{
  color: blue;             /* ご要望の青 */
  margin-top: 8px;
  line-height: 1.4;
  white-space: pre-wrap;
  font-size: clamp(16px, 2.0vw, 22px);
}
#subtitleData .ext-subcue{ margin: 2px 0; }

/* 小さい画面は少し字を大きめに */
@media (max-width: 430px){
  #subtitleData{ font-size: clamp(16px, 4.2vw, 22px); }
}
</style>';

            // ===== UI（切替リンク）=====
            echo '<div class="ds5-shell" style="padding-top:6px;">';
            echo '<div style="text-align:left;margin:6px 0 8px 0;">';
            echo '  <span class="radio-label selected">高画質</span> ';
            echo '  <a href="https://XXXXXX.com/ds6/?drid=' . esc_attr($drid) . '" class="radio-label">低画質</a>';
            echo '  <span style="margin:0 10px;">｜</span>';
            echo '  <a href="https://XXXXXX.com/dr5/?drid=' . esc_attr($drid) . '" class="radio-label">枠内字幕</a> ';
            echo '  <span class="radio-label selected">枠外字幕</span>';
            echo '</div>';

            // ===== 動画本体 =====
            echo '<figure class="wp-block-video aligncenter">';
            echo '  <video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="none">';
            if (!empty($video_url)) {
                echo '    <source src="' . esc_url($video_url) . '" type="video/mp4">';
            }
            if (!empty($subtitle_url)) {
                // ネイティブは使わず外部描画に統一：defaultは付けない
                echo '    <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
            }
            echo '  </video>';
            echo '  <figcaption></figcaption>';
            echo '</figure>';

            // ===== 枠外字幕（動画と同じ幅の中に配置）=====
            echo '<div id="subtitleData" translate="yes" class="ds5-shell"></div>';

            // ===== JS：cuechangeのみ差分描画（翻訳の“パカパカ”抑止）=====
            echo '<script>
document.addEventListener("DOMContentLoaded", function () {
  var video = document.getElementById("myVideo");
  if (!video) return;
  var trackEl = video.querySelector("track");
  var container = document.getElementById("subtitleData");
  if (!container) return;

  var lastSig = "";

  function buildSignature(activeList) {
    if (!activeList || activeList.length === 0) return "";
    var arr = [];
    for (var i = 0; i < activeList.length; i++) {
      var c = activeList[i];
      arr.push([c.startTime, c.endTime, c.text].join("|"));
    }
    return arr.join("||");
  }

  function renderCue(cue) {
    var wrap = document.createElement("div");
    wrap.className = "ext-subcue";
    wrap.setAttribute("translate", "yes");
    if (typeof cue.getCueAsHTML === "function") {
      wrap.appendChild(cue.getCueAsHTML());
    } else {
      wrap.textContent = cue.text;
    }
    return wrap;
  }

  function renderActive() {
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch (e) {}

    var active = trackEl.track.activeCues;
    var sig = buildSignature(active);
    if (sig === lastSig) return; // 変化なければ DOM を触らない → 翻訳が安定
    lastSig = sig;

    container.innerHTML = "";
    if (!active || active.length === 0) return;

    var list = Array.from(active).sort(function(a,b){ return a.startTime - b.startTime; });
    list.forEach(function(cue){ container.appendChild(renderCue(cue)); });
  }

  function hook() {
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    trackEl.track.addEventListener("cuechange", renderActive);
    renderActive();
  }

  if (trackEl) trackEl.addEventListener("load", hook);
  video.addEventListener("loadedmetadata", hook);

  // 端末回転での再レイアウト（差分描画なので翻訳は維持）
  window.addEventListener("orientationchange", function(){
    requestAnimationFrame(renderActive);
  });
});
</script>';

            // ★ ds5 は「字幕一覧／説明」は非表示にする（仕様）
            echo '</div>'; // .ds5-shell

        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }

    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }

} else {
    echo '<p>dridが指定されていません。</p>';
}

// 固定ページ本文
if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```


ds6.php

```
<?php
/*
Template Name: Dropbox Subtitle Outside (Low Quality) Template (ds6) - wide & stable
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts = explode('drid=', $url);
        return explode('&', end($parts))[0];
    }
    return false;
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gt-final-barrier" style="height: 28px!important; display: flex!important; justify-content: space-between!important; align-items: center!important; width: 100%!important; padding: 0 10px!important; border-bottom: 1px solid #eee; background-color: #fff; box-sizing: border-box; overflow: visible!important; margin: 0!important; position: relative; z-index: 1!important;">
    
    <div style="height: 28px; display: flex; align-items: center; flex-grow: 1; overflow: visible!important;">
        <div class="gt-container" style="pointer-events: auto!important;">
            <?php echo do_shortcode('[gtranslate]'); ?>
        </div>
    </div>
    
    <div style="height: 28px!important; display: flex; align-items: center;">
        <a style="display: block; height: 26px;" href="https://notebooklm.google.com/notebook/aa64cc3d-0160-4433-b934-ecc5ab902287" target="_blank" rel="noopener">
<img style="height: 26px!important; width: auto!important; border: none!important; display: block!important;" src="https://XXXXXX.com/rd.php?id=NgFHFYXH.png" alt="Q&A" />
</a>
    </div>
</div>

<style>
/* 【最優先：被さり対策】サイドバー展開時はバーを完全に消去 */
html.noscroll #gt-final-barrier,
body.noscroll #gt-final-barrier,
html.sidebar-visible #gt-final-barrier,
body.sidebar-visible #gt-final-barrier,
.sidebar-visible #gt-final-barrier {
    display: none !important;
}

/* 言語メニューがロゴに被らないよう、必ず「下方向」に開かせる */
.gt_menu, .gt-menu {
    top: 28px !important;
    bottom: auto !important;
    z-index: 999999 !important;
}
</style>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();

if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos = json_decode($json_data, true);

        $video_info = array_filter($videos, function($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info    = reset($video_info);
            $image_url     = $video_info['image']   ?? '';
            $video2_url    = $video_info['video2']  ?? ''; // ★ 低画質（ds6 本体）
            $subtitle_url  = $video_info['subtitle']?? '';

            // ===== Styles（dr5/dr6/ds5 と同じ幅ロジック）=====
            echo '<style>
:root{
  --ds6-max: 1920px; /* テーマ側で上書き可能 */
}
.radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
.radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

/* コンテンツ枠：動画も字幕もこの幅に揃える */
.ds6-shell{
  width: 100%;
  max-width: min(var(--ds6-max, 1920px), 98vw);
  margin: 0 auto;
}

/* Gutenberg 既定の figure 幅制限が強い環境でも同じ挙動に */
figure.wp-block-video.aligncenter{
  width: 100%;
  max-width: min(var(--ds6-max, 1920px), 98vw);
  margin: 0 auto;
}

/* video は常にコンテナ幅いっぱい */
#myVideo{ width:100%; height:auto; display:block; }

/* 枠外字幕（青） */
#subtitleData{
  color: blue;
  margin-top: 8px;
  line-height: 1.4;
  white-space: pre-wrap;
  font-size: clamp(16px, 2.0vw, 22px);
}
#subtitleData .ext-subcue{ margin: 2px 0; }

/* スマホ縦は少し大きめ */
@media (max-width: 430px){
  #subtitleData{ font-size: clamp(16px, 4.2vw, 22px); }
}
</style>';

            // ===== 切替リンク =====
            echo '<div class="ds6-shell" style="padding-top:6px;">';
            echo '<div style="text-align:left;margin:6px 0 8px 0;">';
            echo '  <a href="https://XXXXXX.com/ds5/?drid=' . esc_attr($drid) . '" class="radio-label">高画質</a> ';
            echo '  <span class="radio-label selected">低画質</span>';
            echo '  <span style="margin:0 10px;">｜</span>';
            echo '  <a href="https://XXXXXX.com/dr6/?drid=' . esc_attr($drid) . '" class="radio-label">枠内字幕</a> ';
            echo '  <span class="radio-label selected">枠外字幕</span>';
            echo '</div>';

            // ===== 動画 =====
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video2_url)) {
                echo '  <video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="none">';
                echo '    <source src="' . esc_url($video2_url) . '" type="video/mp4">';
                if (!empty($subtitle_url)) {
                    // ネイティブは使わず外部描画に統一：default は付けない
                    echo '    <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
                }
                echo '  </video>';
                echo '  <figcaption></figcaption>';
            } else {
                echo '<p style="text-align:center;color:red;font-weight:bold;margin-top:20px;">（この動画の低画質版は準備中です）</p>';
            }
            echo '</figure>';

            // ===== 枠外字幕（動画と同じ幅で中央）=====
            echo '<div id="subtitleData" translate="yes" class="ds6-shell"></div>';

            // ===== JS：cuechange のみ差分描画（翻訳安定）=====
            echo '<script>
document.addEventListener("DOMContentLoaded", function () {
  var video = document.getElementById("myVideo");
  if (!video) return;
  var trackEl = video.querySelector("track");
  var container = document.getElementById("subtitleData");
  if (!container) return;

  var lastSig = "";

  function buildSignature(activeList) {
    if (!activeList || activeList.length === 0) return "";
    var arr = [];
    for (var i = 0; i < activeList.length; i++) {
      var c = activeList[i];
      arr.push([c.startTime, c.endTime, c.text].join("|"));
    }
    return arr.join("||");
  }

  function renderCue(cue) {
    var wrap = document.createElement("div");
    wrap.className = "ext-subcue";
    wrap.setAttribute("translate", "yes");
    if (typeof cue.getCueAsHTML === "function") {
      wrap.appendChild(cue.getCueAsHTML());
    } else {
      wrap.textContent = cue.text;
    }
    return wrap;
  }

  function renderActive() {
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch (e) {}

    var active = trackEl.track.activeCues;
    var sig = buildSignature(active);
    if (sig === lastSig) return; // 変化なし→DOM 触らない（翻訳が維持）
    lastSig = sig;

    container.innerHTML = "";
    if (!active || active.length === 0) return;

    var list = Array.from(active).sort(function(a,b){ return a.startTime - b.startTime; });
    list.forEach(function(cue){ container.appendChild(renderCue(cue)); });
  }

  function hook() {
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    trackEl.track.addEventListener("cuechange", renderActive);
    renderActive();
  }

  if (trackEl) trackEl.addEventListener("load", hook);
  video.addEventListener("loadedmetadata", hook);

  // 端末回転での再レイアウト（差分描画なので翻訳は維持）
  window.addEventListener("orientationchange", function(){
    requestAnimationFrame(renderActive);
  });
});
</script>';

            // ★ ds6 も「字幕一覧／説明」は非表示（仕様）
            echo '</div>'; // .ds6-shell

        } else {
            echo '<p>No data found for drid: ' . esc_html($drid) . '</p>';
        }

    } else {
        echo '<p>Failed to retrieve JSON data.</p>';
    }

} else {
    echo '<p>No id provided.</p>';
}

// 固定ページ本文
if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```