[h1]Dangerously Close[/h1]

[html]
<style>
#psv-box {
  position:relative; width:100% !important; max-width:none !important;
  margin:0 !important; line-height:0; border-radius:4px !important; overflow:hidden !important;
}
#psv { display:block; width:100% !important; height:auto; background:#0c0a0a; border-radius:0 !important; }
#psv-ui {
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:14px;
  padding:28px 16px 12px;
  background:linear-gradient(transparent, rgba(10,8,8,.55));
}
#psv-play, #psv-mute {
  width:22px; height:22px; padding:0; border:0;
  background:transparent; color:#f3ece8; cursor:pointer; line-height:0;
}
#psv-bar {
  -webkit-appearance:none !important; appearance:none !important;
  flex:1; height:2px !important; min-height:2px !important; max-height:2px !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  outline:none; cursor:pointer; box-shadow:none !important;
  background:rgba(243,236,232,.32);
}
#psv-bar::-webkit-slider-runnable-track { height:2px !important; background:transparent; border:0; }
#psv-bar::-webkit-slider-thumb {
  -webkit-appearance:none; width:7px; height:7px; margin-top:-2.5px;
  border:0; border-radius:50%; background:#f3ece8;
}
#psv-bar::-moz-range-track { height:2px; background:transparent; border:0; }
#psv-bar::-moz-range-thumb { width:7px; height:7px; border:0; border-radius:50%; background:#f3ece8; }
</style>
<div id="psv-box">
  <video id="psv" loop muted playsinline preload="metadata" src="https://forumstatic.ru/files/001c/ca/e1/25926.mp4"></video>
  <div id="psv-ui">
    <button id="psv-play" type="button" aria-label="пуск">
      <svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
    </button>
    <input id="psv-bar" type="range" min="0" max="1000" value="0">
    <button id="psv-mute" type="button" aria-label="звук">
      <svg id="psv-ico" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"></svg>
    </button>
  </div>
</div>
<script>
(function () {
  var v = document.getElementById("psv");
  var bar = document.getElementById("psv-bar");
  var play = document.getElementById("psv-play");
  var mute = document.getElementById("psv-mute");
  var ico = document.getElementById("psv-ico");
  var drag = false;
  var playIco = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>';
  var pauseIco = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M6 5h3.2v14H6zm8.8 0H18v14h-3.2z" fill="currentColor"/></svg>';
  function soundIco(on) {
    ico.innerHTML = on
      ? '<path d="M4 9h3.5L12 5.5v13L7.5 15H4z" fill="currentColor" stroke="none"/><path d="M15.5 9.2a3.4 3.4 0 010 5.6"/>'
      : '<path d="M4 9h3.5L12 5.5v13L7.5 15H4z" fill="currentColor" stroke="none"/><path d="M16 10l4 4M20 10l-4 4"/>';
  }
  function paint() {
    var p = (bar.value / 1000) * 100;
    bar.style.setProperty("background", "linear-gradient(90deg,#8d1c24 " + p + "%,rgba(243,236,232,.32) " + p + "%)", "important");
  }
  function fit() { if (window.setHeight) setHeight(); }
  v.loop = true;
  v.muted = true;
  soundIco(false);
  paint();
  v.addEventListener("loadedmetadata", fit);
  setTimeout(fit, 300);
  function toggle() {
    if (v.paused) { v.play(); play.innerHTML = pauseIco; }
    else { v.pause(); play.innerHTML = playIco; }
  }
  play.onclick = toggle;
  v.onclick = toggle;
  mute.onclick = function () {
    v.muted = !v.muted;
    soundIco(!v.muted);
  };
  v.addEventListener("timeupdate", function () {
    if (!drag && v.duration) {
      bar.value = Math.round(v.currentTime / v.duration * 1000);
      paint();
    }
  });
  bar.addEventListener("pointerdown", function () { drag = true; });
  bar.addEventListener("pointerup", function () { drag = false; });
  bar.addEventListener("input", function () {
    if (v.duration) v.currentTime = bar.value / 1000 * v.duration;
    paint();
  });
})();
</script>
[/html]