# [メタ情報]
# 識別子: vimeo埋め込みコード及びphp_シーク付き字幕使用可能_exe
# システム名: vimeo埋め込みコード及びphp_シーク付き字幕使用可能
# 技術種別: Misc
# 機能名: Misc
# 使用言語: カスタムhtml php
# 状態: 実行用
# [/メタ情報]
要約：このコードは、Vimeo動画を埋め込み表示し、字幕一覧や外部HTMLからの操作で任意の再生位置へシーク再生できる仕組みを実装している。JavaScriptではVimeo Player APIを用い、data属性で指定された秒数や時刻表記を解析して再生位置を制御し、外部から直接呼び出せる関数も用意している。PHPテンプレート側ではJSONファイルから動画情報を取得し、動画IDに基づいて適切な埋め込みコードを表示、不要なリンクを除去する。さらにCSSにより字幕一覧（details要素）の本文部分をスクロール可能な固定高さ枠として定義し、vm5専用ラッパー内に限定して適用することで、表示の安定性と個別調整のしやすさを確保している。

```
<p style="font-size: 14px;">
  <a href="@@gggg@@" target="_blank" rel="noopener">
    動画を別ページで表示(ここをクリック)
  </a>
</p>

<div class="iframe-wrapper">
  <iframe
    id="vimeoPlayer"
    src="https://player.vimeo.com/video/@@eee@@?title=0&byline=0&portrait=0&controls=1&speed=1&texttrack=ja&dnt=1&loop=0"
    frameborder="0"
    allow="autoplay; fullscreen"
    allowfullscreen></iframe>
</div>

<div>
  [dynamic_external_html url="@@ddd@@"]
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const iframe = document.getElementById('vimeoPlayer');
  
  if (!iframe || !window.Vimeo || !Vimeo.Player) return;

  const player = new Vimeo.Player(iframe);

  function parseTs(ts) {
    if (!ts) return null;
    const t = ts.trim();
    const parts = t.split(':').map(v => parseInt(v, 10));
    if (parts.length === 2 && parts.every(Number.isFinite)) {
      return parts[0] * 60 + parts[1];
    } else if (parts.length === 3 && parts.every(Number.isFinite)) {
      return parts[0] * 3600 + parts[1] * 60 + parts[2];
    }
    return null;
  }

  document.addEventListener('click', (e) => {
    const a = e.target.closest('a.imk-cue');
    if (!a) return;

    e.preventDefault();

    let sec = null;
    if (a.dataset.seconds) {
      sec = Number(a.dataset.seconds);
    } else if (a.dataset.seek) {
      sec = parseTs(a.dataset.seek);
    }

    if (sec !== null && Number.isFinite(sec)) {
      player.setCurrentTime(sec).then(() => player.play()).catch(() => {});
    }
  });

  player.on('timeupdate', function(data) {
    const currentTime = data.seconds;

    const listContainer = document.querySelector('details > p');
    if (!listContainer) return;

    const cues = listContainer.querySelectorAll('a.imk-cue');
    if (cues.length === 0) return;

    let activeCue = null;

    for (let i = 0; i < cues.length; i++) {
      const cueTime = parseTs(cues[i].getAttribute('data-seek'));
      if (cueTime !== null && currentTime >= cueTime - 0.5) {
        activeCue = cues[i];
      } else if (cueTime > currentTime) {
        break;
      }
    }

    if (activeCue) {
      if (activeCue.classList.contains('active-scroll-hl')) return;

      const old = listContainer.querySelectorAll('.active-scroll-hl');
      old.forEach(el => el.classList.remove('active-scroll-hl'));

      activeCue.classList.add('active-scroll-hl');

      if (listContainer.offsetParent !== null) {
        const containerRect = listContainer.getBoundingClientRect();
        const activeRect = activeCue.getBoundingClientRect();

        const targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeCue.clientHeight / 2);

        listContainer.scrollTo({
          top: targetScroll,
          behavior: "smooth"
        });
      }
    }
  });
});
</script>

<style>
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: visible;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ▼ 字幕一覧（details）の見た目調整 */
details > p {
  font-size: 14px !important; /* ★変更: 16px から 14px に小さくしました。強制的に適用させるため !important を付与しています */
  line-height: 1.6;
  height: 200px !important; 
  overflow: auto;
  background-color: #EDF7FF;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
  position: relative; 
}
details > summary {
  font-size: 14px !important; /* ★変更: 見出しもバランスを合わせるため 14px に小さくしました */
  padding: 2px 6px;
  width: 100%;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

/* ▼ 自動スクロール時のハイライト色（赤文字・標準の太さ・赤下線） */
.active-scroll-hl {
    background-color: #ffff00;
    color: #ff0000;
    font-weight: normal; 
    border-bottom: 2px solid red; 
    display: inline-block;        
    border-radius: 2px;
}
</style>
```


対応条件：

{"gggg":"18","eee":"3","ddd":"12"}


vm5用php
vimeo-custom-template3.php

```
<?php
/*
Template Name: Vimeo Custom Template3
*/

// ========== ユーティリティ ==========
function get_vimeo_video_id() {
    $movid = isset($_GET['movid']) ? sanitize_text_field($_GET['movid']) : '';
    return trim((string)$movid);
}

// JSONロード（/_secure/wp_json を最優先、なければ旧パスを順に試す）
function vm5_load_embed_json_array(&$debug_info = null) {
    $path_candidates = [
        $_SERVER['DOCUMENT_ROOT'] . '/_secure/wp_json/videoembed.json',                         // ★今回の実体
        $_SERVER['DOCUMENT_ROOT'] . '/wp-content/uploads/_secure/wp_json/videoembed.json',     // 以前の想定
        $_SERVER['DOCUMENT_ROOT'] . '/wp-content/uploads/gd_wp_data/videoembed.json',          // 旧構成
    ];

    $debug_info = ['path' => 'n/a', 'mtime' => 'n/a', 'entries' => 0, 'json_ok' => false];

    $raw = false;
    foreach ($path_candidates as $p) {
        if (is_readable($p)) {
            $raw = @file_get_contents($p);
            $debug_info['path'] = $p;
            break;
        }
    }
    if ($raw === false) {
        error_log('vm5: failed to read any json path');
        return false;
    }

    $mtime = @filemtime($debug_info['path']);
    if ($mtime) $debug_info['mtime'] = date('Y-m-d H:i:s', $mtime);

    $data = json_decode($raw, true);
    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        error_log('vm5: json decode error - ' . json_last_error_msg());
        return false;
    }
    $debug_info['json_ok'] = true;
    $debug_info['entries'] = is_array($data) ? count($data) : 0;
    return is_array($data) ? $data : [];
}

// 厳密一致検索
function vm5_find_by_movid($data, $movid) {
    if (!is_array($data)) return null;
    $movid = trim((string)$movid);
    foreach ($data as $row) {
        $vid = isset($row['videoid']) ? trim((string)$row['videoid']) : '';
        if ($vid === $movid) return $row;
    }
    return null;
}

// 不要リンク削除（「動画を別ページで表示(ここをクリック)」）
function vm5_strip_unwanted_link($html) {
    $pattern = '/<a[^>]*>\s*動画を別ページで表示\(ここをクリック\)\s*<\/a>/u';
    return preg_replace($pattern, '', (string)$html);
}

// the_content 用フィルタ（※ remove_filter できるように “名前付き” で用意）
function vm5_filter_the_content($content) {
    return vm5_strip_unwanted_link($content);
}

// ========== 表示開始 ==========
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="gk-topbar-video" style="display:flex; gap:8px; align-items:center; justify-content:flex-start; width:100%; padding:6px 10px; background:#f9f9f9; border-bottom:1px solid #e5e5e5; box-sizing:border-box; font-family:sans-serif; position:relative; z-index:100;">
    <div id="google_translate_element_video"></div>
    <a href="https://gemini.google.com/gem/1yilwupQm0LXm0iIqjU66YfaMlrHJTULi?usp=sharing" target="_blank" rel="noopener noreferrer" style="margin-left:auto; text-decoration:none; line-height:0;">
        <img src="https://XXXXXX.com/rd.php?id=tVo8al62.png" alt="Gemini Q&A" style="height:30px; width:auto; border-radius:4px;">
    </a>
</div>

<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

// ★vm5 側で「字幕一覧(details)の枠高さ」が効くように、ここでCSSを確実に出す
// - dr5 は details > p だったが、vm5 は div/ul など別構造の可能性が高い
// - summary 以外の“中身ブロック”に max-height を当てる（構造差に強い）
// - 影響範囲を vm5-wrapper の中だけに限定する
?>
<style>
/* vm5：字幕一覧(details)の本文ブロック(p)を「スクロール枠」として確定させる */
.vm5-wrapper details > p{
  display: block;
  min-height: 180px;
  max-height: 240px;      /* ← ここを 150/200/250/300 などに変更 */
  overflow-y: auto;

  /* 箱の見た目も p 側に寄せる（“枠が変わった”と体感しやすい） */
  background-color: #EDF7FF;
  padding: 6px 8px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
  border-radius: 0 0 5px 5px;
}

/* summary（見出し）はそのまま */
.vm5-wrapper details > summary{
  padding: 2px 6px;
  width: 100%;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

/* ★追加: 字幕ハイライトのスタイルを dr52 (赤文字・赤アンダーライン) に合わせる */
.vm5-wrapper .active-scroll-hl,
.vm5-wrapper .active-hl {
    background-color: #ffff00 !important; /* 黄色背景 */
    color: #ff0000 !important;            /* 赤文字 */
    border-bottom: 2px solid red !important; /* 赤アンダーライン */
    font-weight: normal !important;
    display: inline-block;
    border-radius: 2px;
}
</style>
<?php

$movid = get_vimeo_video_id();

if ($movid) {
    $dbg = [];
    $arr = vm5_load_embed_json_array($dbg);
    $video_info = vm5_find_by_movid($arr, $movid);

    // ?debug=1 で内部情報表示
    $debug = isset($_GET['debug']) && $_GET['debug'] == '1';
    if ($debug) {
        echo '<div style="font:12px/1.6 monospace; background:#f6f6f6; padding:8px; margin:10px 0;">';
        echo 'path=' . esc_html($dbg['path']) . '<br>';
        echo 'mtime=' . esc_html($dbg['mtime']) . '<br>';
        echo 'entries=' . esc_html($dbg['entries']) . '<br>';
        echo 'movid=' . esc_html($movid) . '<br>';
        echo 'hit=' . ($video_info ? ('videoid=' . esc_html($video_info['videoid'])) : 'none');
        echo '</div>';
    }

    if ($video_info && !empty($video_info['embedCode'])) {
        // embedCode をショートコード展開 → 不要リンク除去
        $embed = do_shortcode($video_info['embedCode']);
        $embed = vm5_strip_unwanted_link($embed);

        // ★CSS の適用範囲を限定するため、必ずラッパーで囲む
        echo '<div class="vm5-wrapper">';
        echo $embed;
        echo '</div>';

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

// the_content にも同様の除去をかけたい場合（※ remove_filter が確実に効く）
add_filter('the_content', 'vm5_filter_the_content', 9);

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

remove_filter('the_content', 'vm5_filter_the_content', 9);

get_footer();
?>
```