特定の要素上のみでマウスストーカーさせたいのに追従しない

Question

実現したいこと

動画上にマウスオンしたら、画像をマウスに追従させたい。
表示および追従させる範囲は、動画上のみとしたいです。

マウスストーカーの稼働範囲…movieのclassが付いたdiv要素
マウスストーカー…mouse-stalkerのclassが付いたimg要素

発生している問題

動画上で画像がマウスに追従しません。

該当のソースコード

<div class="movie">
  <iframe width="790" height="605" src="https://www.youtube.com/embed/hlWiI4xVXKY"></iframe>
  <div id="mouse-stalker-wrap" class="mouse-stalker-wrap">
    <img class="mouse-stalker" src="assets/img/mouse-stalker.png" alt="" />
  </div>
</div>

.movie {
  position: relative;
  max-width: 790px;
  width: 100%;
  height: 605px;
  aspect-ratio: 16/9;
}

.movie:hover .mouse-stalker {
  z-index: 100;
  position: fixed;
  transition: all 0.6s ease;
}

.first-view .mouse-stalker {
  position: fixed;
  width: 128px;
  height: 128px;
  opacity: 0;
  transition: 0.2s;
  transition-timing-function: ease-out;
  pointer-events: none;
}

function $mouseStalker() {
    var cursor = $('.big-play-movie-icon');
    $('.movie').on('mousemove', function (e) {
      var x = e.clientX;
      var y = e.clientY;
      cursor.css({
        opacity: '1',
        top: y + 'px',
        left: x + 'px',
      });
    });
  }

試してみたこと

①index.jsのxとyの値が正しく取れているかどうかをconsole.logで確認し、正しく取れていること（＝マウスを動かすと永続的に数値が変化すること）を確認済み。
②index.jsの$('.movie').on('mousemove', function (e) {の'.movie'を'document'に変更すると、動画以外の範囲でのみ画像がスムーズに追従することを確認。つまり、'.movie'が悪影響を起こしているのでは？と推測し、'.movie' iframe'に変更してみたが追従しない。
③iframeが悪影響を起こしていると推測し、CSSファイル内でiframeに対して"display: block;"のスタイルを追加してみたが変化なし。

Answer 1

iframe上で呼び出し元のマウスストーカーを表現したいということですか？
iframeは別のページですから親ページのCSSは適用されませんが・・・
試した範囲ではすごく不安定な状態で追従することもあるレベルでとても実用レベルにはもっていけない

参考

<style>
.big-play-movie-icon{
position:absolute;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const cursor = document.querySelector('.big-play-movie-icon');
  document.querySelector('.movie').addEventListener('mousemove',e=>{
    const x = e.clientX;
    const y = e.clientY;
    Object.assign(cursor.style,{
      top: y + 'px',
      left: x + 'px',
    });
  });
});
</script>
<div class="movie">
<iframe width="790" height="605" src="https://www.youtube.com/embed/hlWiI4xVXKY"></iframe>
<div id="mouse-stalker-wrap" class="mouse-stalker-wrap big-play-movie-icon">
<svg width=60 height=50>
<circle cx=10 cy=10 r=10 fill=black />
<circle cx=50 cy=10 r=10 fill=black />
<circle cx=30 cy=30 r=20 fill=black />
</svg>
</div>
</div>

Comments

[chibikurochan]

yamabejpさん回答ありがとうございます。
呼び出し元とは、img要素のことで認識合っていますでしょうか。
でしたら、おっしゃる通り、iframe上でimg要素をマウスストーカーを表現したいということです。

動画の挿入方法が、iframeである限り実現したい実装は不可能ということでしょうか？

[yambejp]

＞ 実装は不可能ということでしょうか？

不可能ではないですが安定した動作をしないため限りなく不可能に近いということです

[chibikurochan]

実用レベルに達しないということは理解しました。
不可能でない場合、マウスストーカーさせるには記述のどの部分を直せば良いのでしょうか。

[yambejp]

参考データつけておきました。基本的には質問者さんがご提示されたソースで問題ないです。
iframe上の端っこの方にマウスをのせると「マウスストーカー」がついてくる場合もあれば
ついてこない場合もあります。

[chibikurochan]

参考データありがとうございます。
参考データの記述をコピペして確認してみましたが、マウスストーカーが追従しません。
ちなみに私の記述と異なる点としては、.big-play-movie-iconのpositionがfixed→absoluteにされているくらいでしょうか？
あとはjsの記述内容については、意味的に私の記述内容と同じですよね？
私の記述のどの部分が原因で追従しないのかが、わかりません…。