title: How can I translate between client coordinates of a HTML video element and picture coordinates?
body: <p>Let’s say I have a video element where I want to handle mouse events:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const v = document.querySelector('video');
  
  v.onclick = (ev) =&gt; {
    ev.preventDefault();
    console.info(`x=${event.offsetX}, y=${event.offsetY}`);
  };
  document.querySelector('#play').onclick =
    (ev) =&gt; v.paused ? v.play() : v.pause();
  document.querySelector('#fit').onchange =
    (ev) =&gt; v.style.objectFit = ev.target.value;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="play"&gt;play/pause&lt;/button&gt;
  &lt;label&gt;object-fit: &lt;select id="fit"&gt;
    &lt;option&gt;contain&lt;/option&gt;
    &lt;option&gt;cover&lt;/option&gt;
    &lt;option&gt;fill&lt;/option&gt;
    &lt;option&gt;none&lt;/option&gt;
    &lt;option&gt;scale-down&lt;/option&gt;
  &lt;/select&gt;&lt;/label&gt;
  &lt;video
    style="width: 80vw; height: 80vh; display: block; margin: 0 auto; background: pink;"
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  &gt;
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The event object gives me coordinates relative to the bounding box of the player element (pink).  How can I convert between those and coordinates of the actual scaled picture?</p>
  <p>I don’t particularly care if overflowing coordinates (those beyond the picture frame) are clipped or extrapolated, I don’t mind rounding errors, and I don’t even care much in which units I get them (percentages or pixels).  I would, however, like the solution to be robust to changes to <code>object-fit</code> and <code>object-position</code> CSS properties, and I also want to be able to convert bare coordinates without a mouse event.</p>
  <p>How can I perform such a conversion?</p>