我需要的是这个：
可以在 youtube 视频上更改其 X 和 Y 位置的叠加图像，而无需重新加载页面。
理想情况下，这应该是 Javascript，我猜它在 Interval 上从文本文件（或 MySQL）中获取 X 和 Y 值。
换句话说...假设一辆汽车在 Youtube 视频中行驶，覆盖应该是红色矩形，每隔 1 秒左右，Javascript 从文本文件中获取 X 和 Y，并在 youtube 屏幕红色矩形上重绘。
最终的结果应该是这样的：
https://i.ytimg.com/vi/aEBigBm7KBk/hqdefault.jpg
我是 C++/C# 类型的人，对 Javascript 知之甚少，所以我想将机器学习演示移植到一个友好的界面（网页），我知道这可能是太多的编码，所以如果有人至少可以指出我免费脚本将非常有帮助！谢谢！
【问题讨论】：
标签： javascript jquery css html
我已经准备了一个示例 JSFiddle，它可以帮助您朝着正确的方向开始：https://jsfiddle.net/2nfswab3/
基本上，<div class="overlay"... 是覆盖视频的红色方块。您可以在#app 容器中添加任意数量的它们。您提到他们的位置将随着来自后端代码的值每秒动态变化。更改他们的位置就像更新他们的left, right, top, bottom CSS 属性一样简单。
你可以通过 vanilla JS 这样做：
var redSquares = document.getElementsByClassName('overlay');
var squareOne = redSquares[0];
squareOne.style.left = '300px';
HTML：
<div id="app">
<iframe width="100%" height="400px" src="https://www.youtube.com/embed/KGN_9xZBgYY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="overlay" style="left: 370px; top: 140px;"></div>
<div class="overlay" style="left: 170px; top: 140px;"></div>
</div>
CSS：
html,body{
position: relative;
width: 100%;
height: 100%;
}
#app{
position: relative;
}
.overlay{
border: 2px solid red;
color: #fff;
z-index:2;
position: fixed;
width: 100px;
height: 100px;
}
我希望这会有所帮助。如果您需要进一步的帮助或详细说明，请在评论中提出。
【讨论】：