А вот и сам код для вставки в T123 (у шейпа в зеро блоке нужно добавить класс: circle-video-shape):

(function(){ const selector = '.circle-video-shape'; const target = document.querySelector(selector); if(!target) return console.warn('❌ Не найден элемент', selector);

target.innerHTML =

;

const style = document.createElement('style'); style.textContent = ${selector}{ position:relative; border-radius:50%; overflow:hidden; isolation:isolate; --cv-scale:.65; } @media (hover:hover){ ${selector}:not(.is-active):hover{ --cv-scale:.715; } } ${selector} .cv-root{ position:absolute; inset:0; border-radius:50%; overflow:hidden; transform-origin:50% 50%; transform:scale(var(--cv-scale,.65)); transition:transform .35s cubic-bezier(.2,.7,.2,1); will-change:transform; } ${selector}.is-active .cv-root{ --cv-scale:1; }

${selector} #ks-player, ${selector} #ks-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

${selector} .cv-ring{ position:absolute; inset:0; pointer-events:none; transform:rotate(-90deg); opacity:0; transition:opacity .2s linear; } ${selector}.is-active .cv-ring{ opacity:1; }

${selector} .cv-track, ${selector} .cv-progress{ fill:none; stroke-width:2; } ${selector} .cv-track{ stroke:rgba(255,255,255,.25); } ${selector} .cv-progress{ stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset .08s linear; }

${selector} .cv-activate{ position:absolute; inset:0; background:none; border:0; padding:0; margin:0; cursor:pointer; z-index:4; } ${selector}.is-active .cv-activate{ display:none; } ; document.head.appendChild(style);

const script=document.createElement('script'); script.src='https://player.kinescope.io/latest/iframe.player.js'; document.head.appendChild(script);

const ringEl=target.querySelector('.cv-progress'); const R=57, C=2Math.PIR; ringEl.style.strokeDasharray=C;

let player, rafId, duration=0, activated=false, collapsing=false;

const ensureIframeAllow = () => { const ifr = target.querySelector('#ks-player iframe'); if (ifr) { const allow=(ifr.getAttribute('allow')||''); const need='autoplay; fullscreen; picture-in-picture'; if(!allow.includes('autoplay')){ ifr.setAttribute('allow', (allow ? allow+'; ' : '') + need); } } };

async function trySilentAutoplay(retries=5, delay=300){ if(!player || activated) return; for(let i=0;isetTimeout(r, delay)); } } }

async function enforceMaxVolume(times=4, interval=180){ if(!player || !activated) return; for(let i=0;isetTimeout(r, interval)); } }

window.onKinescopeIframeAPIReady=function(factory){ factory.create('ks-player',{ url:'https://kinescope.io/xA17VKZCgjFddxvU6ZGS3k', size:{width:'100%',height:'100%'} }).then(function(p){ player=p;

ensureIframeAllow(); const mo = new MutationObserver(ensureIframeAllow); mo.observe(target.querySelector('#ks-player'), {childList:true, subtree:true});

player.once(player.Events.Ready, async ev=>{ duration=(ev?.data?.duration)||(await player.getDuration().catch(()=>0))||0; await trySilentAutoplay(); });

player.on(player.Events.Ended, ()=>{ collapseToIdle(); });