Javascript 如何自动禁用/取消禁用滚动html视频

我正在为一个客户编辑一个网站，他从来没有提到会包含一些javascript编辑，但我们在这里。因为我对js一点也不熟悉，所以我真的需要你的帮助。 所以，问题是，在标题中有一个视频（所谓的手机可播放广告）。当你点击它的时候，你可以在声音打开的情况下玩一些游戏。我的客户想要的是，当你向下滚动，视频不再可见时，将声音静音，当你向上滚动时，将其取消静音。 我还没有建立这个网站，我只是在编辑它

我花了好几天的时间在这上面，在这里和谷歌上阅读了不同的帖子和解决方案，但无论我尝试了什么都没用。由于我不熟悉Javascript，我想我做错了什么。我想我不能只是复制别人的代码并期望它工作，但我可能必须更改变量名或其他东西。但我不知道如何改变它，让它发挥作用

<a class="img" href="">
<iframe src="https://appsposure.com/wp-content/uploads/2019/06/bask.html" scrolling="no" frameborder="0"></iframe>  
<img class="phone-img lazyloaded" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt="" data-lazy-src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" data-was-processed="true"><noscript><img class="phone-img" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt=""></noscript>                                
</a>

这是我尝试过多次的解决方案，但它不起作用，因为我可能不知道如何为我的网站调整它

还有，是我正在制作的网站的链接（我正在谈论标题中的视频，上面有一个篮球运动员）

---

如果有人愿意帮助我，我会非常感激，因为我已经挣扎了好几天了，我实在太蠢了，不能这么做。

在iframe上添加了篮球运动员id

$（窗口）。滚动（函数（）{
var iframe=document.querySelector（'iframe'）；
如果（$（this.scrollTop（）>900）{
iframe.mute（）；
}否则{
iframe.unmute（）；
} 
});
您可以使用此功能检查元素是否可见

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

您可以使用以下代码处理正在滚动的视频：

video.muted = !checkVisible(video);

将
视频
作为视频的元素

此代码段显示了此操作：


var video=document.getElementById（'video'）；
var wrapper=document.getElementById（'wrapper'）；
var videoPreviouslyVisible=假；
window.onscroll=函数（）{
wrapper.style.backgroundColor=checkVisible（视频）？“#4f4”：“#f44”；
video.muted=！checkVisible（视频）；
};
功能检查可见（elm）{
var rect=elm.getBoundingClientRect（）；
var viewHeight=Math.max（document.documentElement.clientHeight，window.innerHeight）；
返回！（rect.bottom<0 | | rect.top-viewHeight>=0）；
}
body，
html{
身高：100%；
}
#包装纸{
身高：400%；
背景：无重复滚动0 0#f44；
}
#录像带{
位置：绝对位置；
最高：150%；
左：33%；
宽度：200px；
高度：100px；
背景：无重复滚动0 0#fff；
边框：5px纯黑；
}

html中是否有单独的脚本文件或嵌入的脚本？由于某些原因，它无法工作。我已将id添加到iframe，但什么也没发生。我没有提到该网站是使用OxygenBuilder在WordPress中构建的。PHP&HTML、CSS和JAVASCRIPT有单独的字段。我已经将您的代码添加到JAVASCRIPT字段，其中还有其他脚本和JqueryOriginally，该视频在scroll上暂停，但我的客户端想要删除它，只是将其静音。这是最初使用的代码，也许它可以帮助您：
jQuery（window）.scroll（function（）{if（jQuery（this.scrollTop（）>900）{var closeGame=jQuery（'header-iframe'）；closeGame.detach（）；jQuery（'.close-game'）.css（'display'，'none'）；}其他{closeGame.appendTo（'header.col-md-7.img'）；}）很抱歉打扰你，但是你对此还有什么想法吗？请点击编辑@mockingjay_89让我知道。出于某种原因，我会尽力帮助你，但它不起作用：（你也可以检查一下，可能是因为我的服务器缓存，我不知道。伙计，这个静音功能肯定会杀了我。我不知道，可能是其他东西阻止了这段代码的工作，可能吗？
video.muted = !checkVisible(video);