ライトボックス動画

<div class="d07-03-06-thumb">
          <button class="d07-03-06-open" aria-label="動画を開く">
            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          </button>
        </div>
        <div class="d07-03-06-box">
          <div class="d07-03-06-panel">
            <button class="d07-03-06-close" aria-label="閉じる">&times;</button>
            <div class="d07-03-06-video">
              <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </div>
          </div>
        </div>

.prev.d07-03-06{background:#e2e8f0}
        .d07-03-06-thumb{width:100%;max-width:300px;aspect-ratio:16/9;border-radius:12px;cursor:pointer;
          background:linear-gradient(135deg,#14b8a6,#0ea5e9);display:flex;align-items:center;justify-content:center}
        .d07-03-06-open{width:54px;height:54px;border:none;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;
          display:flex;align-items:center;justify-content:center}
        .d07-03-06-open svg{width:24px;height:24px;fill:#0ea5e9;margin-left:3px}
        .d07-03-06-box{position:absolute;inset:0;background:rgba(15,23,42,.8);display:flex;align-items:center;justify-content:center;
          opacity:0;pointer-events:none;transition:opacity .35s ease;padding:20px}
        .d07-03-06-box.open{opacity:1;pointer-events:auto}
        .d07-03-06-panel{position:relative;width:100%;max-width:340px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
          transform:scale(.9);transition:transform .35s ease}
        .d07-03-06-box.open .d07-03-06-panel{transform:scale(1)}
        .d07-03-06-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
          background:linear-gradient(135deg,#7c3aed,#db2777)}
        .d07-03-06-video svg{width:46px;height:46px;fill:rgba(255,255,255,.85)}
        .d07-03-06-close{position:absolute;top:6px;right:8px;z-index:2;width:30px;height:30px;border:none;border-radius:50%;
          background:rgba(255,255,255,.9);color:#0f172a;font-size:20px;line-height:1;cursor:pointer}

(function(){
        var root=document.querySelector('#item-07-03-06');
        if(!root)return;
        var box=root.querySelector('.d07-03-06-box'),
            open=root.querySelector('.d07-03-06-thumb'),
            close=root.querySelector('.d07-03-06-close');
        open.addEventListener('click',function(){box.classList.add('open');});
        close.addEventListener('click',function(){box.classList.remove('open');});
        box.addEventListener('click',function(e){if(e.target===box)box.classList.remove('open');});
      })();